gpt4 book ai didi

css - 将 div 设置为 100% 高度但内容在 div 末尾下方流动

转载 作者:行者123 更新时间:2023-11-28 14:43:59 25 4
gpt4 key购买 nike

几天来,我一直在努力尝试让一个页面使用 CSS 和 DIVS。基本上我需要一个顶部带有 Logo /横幅广告的 header ,然后是三列布局(导航、主要内容和附加内容),然后以页脚结束页面。

我需要设置背景颜色并在三个内容列周围放置一个 1 px 的边框,这样我就有一个包装 div 围绕它们。三列也可能需要自己的背景颜色。

我的目标是让三个内容列中的每一个都具有相同的高度并根据需要增长。但是,如果我向其中一个添加大量内容,内容就会溢出到页脚下方。我对此进行了大量搜索,并尝试了各种高度和最小高度的组合,但仍然无法正常工作。

我已将 HTML(其中包含 CSS)放置在 http://solomon.ie/so和在 WinXP 上的 FF3 中截取的屏幕

整理后的代码也在这里:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body {
height:100%;
}

body, td, p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

#content_wrapper{
width: 980px;
margin: 0 auto;
border:1px solid #3300FF;
background:#FFFF66;
min-height:100%;
height:100%;
}

#middlecol{
float:left;
min-height:100%;
height:100%;
background:grey;
width:540px;
}
#leftcol{
float:left;
min-height:100%;
background:green;
width:170px;
}
#rightcol{
float:right;
min-height:100%;
background:#66FFCC;
width:250px;
}

#header_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #FF0000;
clear:both;
margin-bottom:8px;
}


#footer_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #000000;
clear:both;
margin-top:8px;
}
</style>


<title>test </title>
</head>

<body>


<div id="header_wrapper"><h1>logo/ad</h1></div>

<div id="content_wrapper">
<div id="rightcol"><h1>RHS column</h1></div>
<div id="leftcol"><h1>LHS</h1></div>
<div id="middlecol"><h1>Main content column</h1></div>
</div>



<div id="footer_wrapper"><h1>footer</h1></div>




</body>
</html>

最佳答案

尝试 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

我已经在各种元素中使用它并且效果非常好。

关于css - 将 div 设置为 100% 高度但内容在 div 末尾下方流动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5541002/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com