也许我要解决所有这些错误,但是我似乎无法弄清楚简单的布局。我基本上想要一个标头,而不是跨越100%的宽度并具有固定的高度(例如120px)。然后,我需要左侧菜单,右侧需要内容。如果视口发生变化,那么如果内容大于视口,则需要显示滚动条(溢出:自动)。但是,我似乎无法使其正常运行。这是我到目前为止的内容:
<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>
看起来是这样的:
这里是问题和我需要做的事情:
最佳答案
这是一个jsbin可以帮助您入门:
http://jsbin.com/exevi3/edit
希望这可以帮助。注意,该示例使用css进行布局,而不是使用表。这是最近推荐的最佳做法。
鲍勃
这是jQuery:
$(document).ready(function(){
setHeight();
$(window).resize(function(){
setHeight();
});
function setHeight(){
var headHeight = $("#header").height();
var docHeight = $(window).height();
var h = docHeight - headHeight - 50;
$("#menu").css('height', h + 'px');
$("#content").css('height', h + 'px');
}
});
其中的“ 50”是因为未考虑一些其他填充。可能是我应该使用innerHeight()。
这是HTML:
<body>
<div id="header">
header
</div>
<div id="body">
<div id="menu">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum aliquam diam, et facilisis lectus auctor vel. Praesent sit amet ante sem, id commodo leo. Praesent eget nisl leo. Quisque vel lectus metus. Morbi pellentesque scelerisque ipsum, eget fermentum sapien molestie et. Vestibulum quis elementum augue. Donec consectetur elit id ligula imperdiet a euismod mi pharetra. Nulla nec sapien et lectus porta sodales. Aliquam sed egestas justo. Integer adipiscing, felis non vehicula commodo, leo tellus aliquam nulla, et cursus nibh felis ac risus. Duis sit amet tempor lectus.</p>
<p>Ut mauris tellus, auctor ut mollis vitae, malesuada at nunc. Aenean condimentum ullamcorper viverra. Etiam elementum erat eget nulla bibendum a faucibus purus feugiat. Nam enim eros, placerat vitae volutpat tincidunt, tristique ac lectus. Proin elit risus, eleifend non varius eget, pretium non lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla blandit lacus blandit nisl porttitor eleifend. Sed adipiscing, leo nec pellentesque tempus, tellus velit pulvinar turpis, euismod pulvinar est odio et elit. Etiam quis turpis a tortor condimentum convallis eu nec velit. Nullam volutpat luctus nisi, in sollicitudin lectus adipiscing vitae. Pellentesque eu neque ut nisl iaculis lacinia nec non odio. Ut id nibh nec leo vulputate malesuada at sit amet risus. Mauris elementum dolor eget ligula pharetra vestibulum. In eu enim eu dui interdum vestibulum.</p>
<p>Ut quis libero et neque lobortis tempus. Quisque adipiscing eleifend lacus, iaculis adipiscing nibh porttitor ut. Sed dapibus nisl quis mauris sagittis blandit. Donec a tellus non ipsum mollis pretium. Morbi non lectus ut purus porttitor auctor. Praesent vulputate dictum augue nec elementum. Nulla facilisi. Duis auctor, metus molestie egestas pellentesque, sem nulla fringilla risus, a ultrices nunc sem ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id neque volutpat nisl sollicitudin vestibulum auctor quis ligula.</p>
<p>Sed eget bibendum nisl. Ut nec odio massa, vitae posuere sem. Pellentesque vel urna sit amet sem gravida dignissim id vitae magna. Mauris aliquam, sapien pharetra malesuada bibendum, nisi metus auctor velit, eu egestas felis metus nec tellus. Morbi elementum pellentesque leo, eget facilisis nunc dictum sit amet. Integer cursus venenatis velit, a laoreet mi aliquet ut. Morbi nisi erat, tristique a porta vitae, hendrerit vel neque. Ut ipsum turpis, lobortis quis congue a, sagittis ut nulla. Donec massa sapien, consectetur facilisis lobortis in, aliquam at justo. Duis feugiat lacus sed sapien condimentum sollicitudin laoreet arcu semper. Phasellus sit amet odio at enim tincidunt congue. Ut ac ante eget eros facilisis faucibus non at mauris.</p>
<p>Vivamus ultrices dui eu nisi tempus semper. Suspendisse consectetur orci non lectus vestibulum dictum. Sed sodales diam vel magna scelerisque quis lobortis ipsum condimentum. Etiam sem orci, bibendum eget sagittis et, ullamcorper at nibh. In sed dignissim dolor. Aliquam erat volutpat. Curabitur vel euismod augue. Integer pulvinar ultrices velit, iaculis tincidunt est scelerisque sed. Integer non vehicula est. Cras pretium viverra augue, in accumsan ante dictum vehicula. Nulla facilisi. In imperdiet pretium tortor, eget vehicula tellus porttitor vel. Praesent erat erat, commodo ac euismod non, tempor sed sem. Fusce non elit nec velit consequat cursus. Phasellus placerat luctus erat, vitae porta sem pulvinar a. Mauris hendrerit neque vitae elit commodo convallis. In ac risus elit, non aliquam tellus.</p>
</div>
</div>
</body>
最后是CSS:
#header{
height: 120px;
background-color: #000;
color: #fff;
}
#menu{
width: 300px;
height: 400px;
overflow-y: scroll;
float: left;
background-color: #ffdddd;
}
#content{
height: 400px;
overflow-y: scroll;
}
抱歉,这些链接不适合您。不确定为什么。您应该可以通过任何方式将其放入test.html页面并查看解决方案。
关于html - HTML + CSS表格布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4400405/