我有一个非常简单的布局,有2个DIVS:一个固定宽度的左栏和一个右侧区域,应该占据剩余宽度的100%.两者都是100%高度,如果高度高于窗口高度,我希望正确的项目具有垂直滚动条.
我当前的代码占用整个浏览器窗口,但右侧区域向右滚动浏览器可视区域,并且从未显示垂直滚动条.
HTML:
<body>
<form id="Form2" runat="server">
<div class="page">
<div class="clear hideSkiplink">
Left side stuff goes here....
</div>
<div class="main">
Right size stuff goes here....
</div>
</div>
</form>
</body>
CSS:
div.hideSkiplink
{
padding:20px;
background-color:#990000;
position:fixed;
top:0px;
left:0px;
width:249px;
height:100%;
}
div.main
{
padding: 10px;
margin: 0px;
background-color: #000000;
color: #ffffff;
position: fixed;
top: 0px;
left: 250px;
width: 100%;
height: 100%;
}
当你给出的东西width:100%意味着'无论我的容器的宽度是多少,我将具有相同的宽度' - 这并不意味着'我会占用100%的可用空间'
换句话说,假设你的父DIV是300像素宽 - 如果你给孩子div width: 100%,它将是300像素的100%.
你可以在这里做什么,因为你的左列是固定宽度,是在右边div添加一个左边距.
div.left
{
width: 249px;
}
div.right
{
width: 100%;
margin-left: 249px;
}
| 归档时间： |
|
| 查看次数： |
12702 次 |
| 最近记录： |