所以我来自设计网页表格,想尝试一下div和CSS,希望你能帮助我。
情况:
目前我有以下的div结构:
我有以下的CSS代码:
问题:
页面中的“menu”和“bodyContent” div具有不同的高度。因此,如果我有一个相当大的“bodyContent”页面,“menu” div将无法一直延伸到“footer” div。如果“menu” div比“bodyContent” div更高,则存在相同的问题。
我希望“menu”和“bodyContent” div都具有相同的高度/延伸到footer div。
我尝试寻找解决方案,但迄今为止没有得到我期望的结果。我希望你们能帮助我。
谢谢
情况:
目前我有以下的div结构:
<div id="header">
<div id="headline">
</div>
<div id="login">
</div>
</div>
<div style="clear: both;" />
<div id="mainbody" style="border-top: black solid 2px;">
<div id="menu">
</div>
<div id="bodyContent">
</div>
</div>
<div style="clear: both;"></div>
<div id="footer"></div>
我有以下的CSS代码:
#mainbody
{
background-color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#menu
{
width: 137px;
float: left;
background-color: #EEEEEE;
padding-left: 3px;
}
#bodyContent
{
float: right;
width: 850px;
background-color: white;
padding: 5px;
}
#headline
{
width: 693px;
height: 75px;
float: left;
background-color: white;
font-family: monospace;
font-size: 48pt;
font-weight: bold;
padding-left: 7px;
}
#login
{
height: 75px;
width: 300px;
float: right;
background-color: white;
}
#header
{
background-color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footer
{
border-top: black solid medium;
width: 1000px;
background-color: white;
margin-left: auto;
margin-right: auto;
height: 50px;
}
问题:
页面中的“menu”和“bodyContent” div具有不同的高度。因此,如果我有一个相当大的“bodyContent”页面,“menu” div将无法一直延伸到“footer” div。如果“menu” div比“bodyContent” div更高,则存在相同的问题。
我希望“menu”和“bodyContent” div都具有相同的高度/延伸到footer div。
我尝试寻找解决方案,但迄今为止没有得到我期望的结果。我希望你们能帮助我。
谢谢