Div 调整大小无法正常工作

发布于 2025-01-06 19:08:15 字数 1575 浏览 0 评论 0原文

我正在为一个学校网站编写一些 css 代码，看起来像这样

body{
background:#000099 url('repeat.png') repeat-x;
margin-bottom:50px;
}



div.wsite-theme{
background-color:#FFFFFF;
border-top:5px solid #AAAAAA;
}

div.wsite-header{
background:#DDDDDD;
border-radius:5px;
}

#wrapper {
width:960px;
margin:0pt auto;
}

#content{
width:850px;
min-height:694px;
position:absolute;
left:98px;
top:150px;
}

#content-main{
width:100%;
min-height:594px;
position:absolute;
top:0px;
}

#navigation{
min-height:1px;
position:absolute;
left:98px;
top:90px;
line-height:2px;
padding:10px 10px;
width:850px;
}

#header{
width:850px;
height:150px;
position:absolute;
top:5px;
left:98px;
}

#footer{
width:100%;
height:100px;
background:#DDDDDD;
position:absolute;
bottom:0px;
border-top:5px solid #AAAAAA;
}

，html 看起来像这样：（

<html>
<head>
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="main-style.css" />
</head>
<body>
<div id="wrapper">
<div id="header" class="wsite-header">
<h1 class="title1">{title}</h1>
</div>
<div id="navigation">
{menu}
</div>
<div id="content">
<div id="content-main" class="wsite-theme">
{content}
</div>
<div id="footer">
{footer}
</div>
</div>
</div>
</body>
</html>

忽略大括号中的内容。它是我们学校让我们使用的网站编辑器）因此，当我进入页面并输入内容时，它会重新调整大小并位于页脚后面。然而，我打算做的是在调整页脚大小以适应内容时将页脚向下推。早些时候它的行为是这样的，那么我做错了什么？

编辑：我想我一开始还不够清楚，我希望父 #content div 随内容主 div 调整大小，以便页脚被向下推

原文

I am writing some css code for a school website that looks like this

body{
background:#000099 url('repeat.png') repeat-x;
margin-bottom:50px;
}



div.wsite-theme{
background-color:#FFFFFF;
border-top:5px solid #AAAAAA;
}

div.wsite-header{
background:#DDDDDD;
border-radius:5px;
}

#wrapper {
width:960px;
margin:0pt auto;
}

#content{
width:850px;
min-height:694px;
position:absolute;
left:98px;
top:150px;
}

#content-main{
width:100%;
min-height:594px;
position:absolute;
top:0px;
}

#navigation{
min-height:1px;
position:absolute;
left:98px;
top:90px;
line-height:2px;
padding:10px 10px;
width:850px;
}

#header{
width:850px;
height:150px;
position:absolute;
top:5px;
left:98px;
}

#footer{
width:100%;
height:100px;
background:#DDDDDD;
position:absolute;
bottom:0px;
border-top:5px solid #AAAAAA;
}

with html that looks like this:

<html>
<head>
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="main-style.css" />
</head>
<body>
<div id="wrapper">
<div id="header" class="wsite-header">
<h1 class="title1">{title}</h1>
</div>
<div id="navigation">
{menu}
</div>
<div id="content">
<div id="content-main" class="wsite-theme">
{content}
</div>
<div id="footer">
{footer}
</div>
</div>
</div>
</body>
</html>

(ignore content in curly bracers. it for the website editor our school makes us use)
So when i go on my page and type in the content it re-sizes and goes behind the footer . However what i intend for it to do is push the footer down as it re-sizes to fit the content. Earlier it was behaving this way, so what am i doing wrong?

EDIT: i guess i wasn't clear enough at first,i want the parent #content div to resize with the content main div so the footer is pushed down

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹沉浮 2025-01-13 19:08:15

你为什么要使用绝对位置？从所有 DIV 中删除所有 position:absolute（它们不是必需的）。使用边距来定位它们，这样您就不会遇到 DIV 大小变化的问题。

正如 Mathew 提到的，当您使用 position:absolute 属性时，它会将该元素从文档流中取出，因此不会影响其周围的元素。您的所有 DIV 均按照您希望的显示顺序排列，无需对其中任何一个进行绝对定位。

只需取出定位并弄乱包装器的填充即可获得您正在尝试的相同内容 - http://jsfiddle。净/n3Xqx/

回复收藏 0 原文

冷情 2025-01-13 19:08:15

不要使用 position:absolute;，它会脱离常规文档流。

编辑：如果您需要在页眉/页脚/内容区域之间提供更多的垂直间距，请使用 margin

回复收藏 0 原文

酒解孤独 2025-01-13 19:08:15

添加相对于包装器的位置。
将内容和页脚的绝对位置替换为相对位置。

#wrapper {
    width: 960px;
    margin: 0pt auto;
    position: relative;
}    
#content {
    width: 850px;
    min-height: 694px;
    left: 98px;
    top: 150px;
    position: relative;
}
#content-main {
    width: 100%;
    min-height: 594px;
    position: relative;
    top: 0px;
}
#footer {
    width: 100%;
    height: 100px;
    background: #DDDDDD;
    bottom: 0px;
    border-top: 5px solid #AAAAAA;
    position: relative;
}

Add position relative to the wrapper.
Replace position absolute to relative for content and footer.

#wrapper {
    width: 960px;
    margin: 0pt auto;
    position: relative;
}    
#content {
    width: 850px;
    min-height: 694px;
    left: 98px;
    top: 150px;
    position: relative;
}
#content-main {
    width: 100%;
    min-height: 594px;
    position: relative;
    top: 0px;
}
#footer {
    width: 100%;
    height: 100px;
    background: #DDDDDD;
    bottom: 0px;
    border-top: 5px solid #AAAAAA;
    position: relative;
}

回复收藏 0 原文

~没有更多了~