200分，请教一个div＋css的解决方案

福贵 2007-04-17 09:15:24

________________________________________
| |
| div1 |
|______________________________________|
| | |
| div2 | |
|高度自适应 | div5 |
|___________| 高度自适应 |
| | |
| div3 |__________________________|
|高度自适应 | |
|___________| div6 |
| | |
| div4 | 高度自适应 |
|高度自适应 | |
|___________|__________________________|
| |
| div7 |
| |
----------------------------------------

...全文

416 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

whb147 2007-04-17

打赏
举报

还有，你可以在最后用js调整一下高度div6的高度，以达到对齐

李睿_Lee 2007-04-17

打赏
举报

我有个郁闷的问题。
为什么我的页面里，不设高，内容会显示不完全呢？会被挡了。
看看我做的http://www.bantto.com/,都加了高的，不然有地方会有问题。

meizz 2007-04-17

打赏
举报

当然, 我为那几个 div 添加的 height 纯粹是为了演示而已, 在真正的页面当中, 不应该出现任何高度的设置

yokibear 2007-04-17

打赏
举报

那就不要给 div2 3 4设高度.最好div5 6也不要设高度吧.这样就能自动适应内容了.但是咧,如果没有内容,就会挤成一团.
meizz好厉害,我都看不懂LZ想要的效果是什么样子的.

meizz 2007-04-17

打赏
举报

那你就把部分 sidebar 的内容放到 pageContent 里去

福贵 2007-04-17

打赏
举报

多谢老大
但是有一个问题
假如我有很多内容在div2，3，4的话整个页面就不成样子了
请问如何解决？

meizz 2007-04-17

打赏
举报

<html><head><style type="text/css">
body{text-align: center; background-color: #EEE; margin: 0;}
#wrapper{text-align: left; width: 960px; margin: auto; padding: 0 5px; background-color: #FFF}
#header, #footer{height: 100px; background-color: yellow;}
#sidebar{float: left; width: 180px; background-color: green;}
#sidebar div{height: 120px; border: solid 1px #000; margin-bottom: 5px;}
#pageContent{float: right; width: 767px;}
#pageContent div{height: 183px; border: solid 1px #000; margin-bottom: 5px;}
</style></head><body>

<div id="wrapper">
<div id="header">div1</div>
<div id="mainWrapper">
<div id="sidebar">
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
<div id="pageContent">
<div>div5</div>
<div>div6</div>
</div>
<div style="clear: both"></div>
</div>
<div id="footer">div6</div>
</div>

</body></html>

cnyu 2007-04-17

打赏
举报

/* Layout Stylesheet */
/* layout.css */
body{
margin: 0px;
padding:0px;
background: #c0c0c0;
color: #333333;
}

#lh-col{
width: 40%;
height: 100%;
float: left;
border: solid #333333;
border-width: 0 2px 0 0;
background: #ff0000;
color: #333333;
margin: 0;
padding: 40px;
}

#rh-col{
height: 100%;
background: #00ff00;
color: #333333;
margin: 0;
padding: 0;
}

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>New Page 1</title>

<link rel="stylesheet" type="text/css" href="layout.css" />
</head>

<body>

<div id="div1" style="width: 100%; height: 10%">
This is div1
</div>

<div id="maindiv" style="width: 100%; height: 80%" >

<div id="lh-col">

<div id="div2" style="width: 40%; ">
This is div 2.
<p>sdfasdfas</p>
<p>asdfa</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>　</div >

<div id="div3" style="width: 40%; ">
This is div 3.
</div>

<div id="div4" style="width: 40%; ">
This is div 4.
</div>
</div>

<div id="rh-col" >
This div 5
</div>

</div>

<div id="div6" style="width:100%; height: 10%">
This is div6. bottom.
</div>

</body>

</html>