也许我会谈论这一切都是错误的,但我似乎无法弄清楚简单的布局。我基本上想要一个标题,而不是跨越100%的宽度,并有一个固定的高度(比如120px)。然后,我需要一个左侧菜单和右侧的内容。如果视口更改,如果内容大于视口(溢出:自动),则需要显示滚动条。但是,我似乎无法使其正常工作。这是我到目前为止有:HTML + CSS表格布局
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Client Layout Test</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container
{
position: fixed;
height: 100%;
width: 100%;
background: #eaeaea;
}
#header
{
background: #000000;
height: 120px;
}
.PageTitle{
color: #ffffff;
font-size: 1.8em;
width: 100%;
height: 100px;
text-align: center;
padding-top: 15px;
}
.leftMenu{
padding-top: 10px;
padding-left: 5px;
}
</style>
</head>
<body>
<div id="header">
<div class="PageTitle">CLIENT NAME AND LOGO GO HERE!</div>
</div>
<div id="container" style="overflow: auto;">
<table width="100%" cellpadding="0" cellspacing="0" style="height: 100%;">
<tr valign="top">
<td style="background: #5a7394; width: 235px;">
<div class="leftMenu">
List of links goes here
</div>
</td>
<td style="background: #ffffff; padding-left: 10px;">
<div style="text-align: justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum egestas nulla nec accumsan. Suspendisse pretium luctus rhoncus. Suspendisse euismod, magna non tempor lobortis, sapien velit ornare est, a venenatis enim erat a lectus. Nunc placerat, lorem ac viverra aliquet, nisl nunc varius sem, nec commodo dui mauris interdum augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vulputate nunc non lorem mattis luctus. Sed sit amet lorem venenatis ipsum blandit commodo. Mauris tempor dolor a nisl tristique volutpat. Aliquam tincidunt rhoncus diam vitae faucibus. Sed consequat diam in eros laoreet placerat.</p>
<p>Pellentesque consectetur tincidunt tortor, a laoreet massa interdum vitae. Nam faucibus ante sit amet lacus pulvinar eleifend. Sed iaculis tempor nunc ut tincidunt. Phasellus id metus ac purus fringilla pellentesque pulvinar nec arcu. In augue lacus, imperdiet et egestas vel, laoreet eget lorem. Donec ante tellus, feugiat eu feugiat sed, consequat sed felis. Duis porta est sit amet erat lacinia vehicula. Nullam congue luctus sapien, ut suscipit augue varius a. In consectetur dignissim urna. Donec adipiscing ornare magna eget laoreet. Fusce purus mauris, vestibulum id feugiat ac, pretium at libero. Nam placerat, ante ornare gravida cursus, magna risus eleifend dolor, ut auctor velit purus at ligula. Nullam ultrices, orci fermentum semper euismod, velit metus condimentum lacus, consequat interdum dolor orci ut elit.</p>
<p>Aliquam quis nibh ac ipsum dignissim sodales ac id arcu. Ut rutrum dolor at mauris ullamcorper dignissim. Vivamus sagittis iaculis varius. Nullam pharetra enim id lectus placerat venenatis. Ut gravida nisl magna. Praesent pretium viverra convallis. Nullam molestie, est vitae luctus rhoncus, ante mi porttitor dolor, id fermentum sem eros et dui. Quisque imperdiet, justo nec aliquet dictum, lorem felis pulvinar augue, at facilisis magna metus a elit. Fusce molestie nunc nec dui blandit nec cursus neque molestie. Sed tempus metus et neque malesuada ut lacinia tortor suscipit. Sed tristique sagittis elit, tempor tincidunt augue tempus at. Vestibulum convallis volutpat euismod.</p>
<p>Integer mattis vulputate viverra. Cras ultrices, lectus vitae mollis pharetra, dui odio porttitor quam, vel iaculis arcu felis vel arcu. Nam posuere viverra erat, nec molestie nunc egestas a. Proin pharetra, velit quis pretium ullamcorper, arcu dui condimentum sem, eget vulputate urna turpis vitae lorem. Suspendisse vitae felis sit amet odio dapibus vulputate. Nam hendrerit tempor neque, ac dapibus turpis ullamcorper eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ipsum justo, venenatis in dignissim sit amet, consectetur gravida elit. Praesent tincidunt, orci vel elementum condimentum, nisl purus auctor orci, in ullamcorper nulla nisl et mi. Suspendisse volutpat urna vel nunc dapibus venenatis consequat nibh blandit. Cras id ipsum orci. Pellentesque eget odio dui. Fusce porta erat quis eros ornare varius. In viverra dui nec est rhoncus sed tincidunt augue imperdiet. Etiam a lectus et dui mollis fringilla.</p>
<p>Sed odio sapien, viverra in egestas eu, tempor consequat erat. Vestibulum laoreet felis eu ante dapibus porttitor malesuada quam varius. Morbi egestas quam nec metus ultrices ultricies. Sed lacus libero, mattis ut feugiat at, iaculis a orci. Fusce ullamcorper accumsan dui. Aenean sit amet condimentum velit. Suspendisse turpis magna, ornare in sodales vitae, lacinia id elit. Sed non nulla ac augue egestas lacinia et a arcu. Aenean vel dolor lectus, eu imperdiet sem. Integer vel tellus sed dolor mattis condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eget massa massa, imperdiet volutpat velit. Duis a massa sit amet ligula scelerisque venenatis semper at ipsum. Aenean varius nisi a diam pretium ac facilisis metus aliquet. Ut tempus ante ac leo cursus in convallis nibh malesuada. Praesent sit amet eros neque, luctus fringilla nisi. Aliquam erat volutpat. Nam est erat, volutpat eget vulputate eget, gravida ut lorem. Nam ultricies nibh nec turpis vulputate lacinia eget vel eros. Nullam nulla tellus, porttitor id tempor non, rhoncus vitae neque.</p>
</div>
</td>
</tr>
</table>
</div>
</body>
这里是什么样子:
这里的问题,我需要做的:
overflow-y:scroll; =>只设置一个垂直滚动条 – Icid 2010-12-09 16:20:32
但我不知道高度会是多少。该页面是动态的,并且视口(屏幕分辨率)是动态的。我需要处理这两种情况。 – Keith 2010-12-09 16:49:45
嗯,真的,你可以设置一些JavaScript的高度.. – Icid 2010-12-09 16:55:56