内容div没有根据需要调整大小

我的网页上有以下三个div！内容div没有根据需要调整大小

#header { //top div 
height: 60px; 
min-width: 1024px; 
background-image: url(../images/header_bg.jpg); 
background-repeat: repeat-x; 
display: block; 
} 

#content { //middle div 
min-width: 1024px; 
min-height: 585px; 
} 

#buttons { //bottom div 
min-width: 1024px; 
height: 120px; 
max-height: 120px; 
background-color: rgba(229, 229, 255, 0.76); 
}

example picture

所示的图像中，当分辨率的变化，内容的div不会扩展！我怎样才能使内容div扩大到适合页面大小！没有得到任何垂直滚动！

来源

2013-04-30 Imesh Chandrasiri

所以你说你想要的按钮坚持到浏览器窗口的底部？在这种情况下，你可能想要所谓的“粘脚”。 – 2013-04-30 08:39:14

假设我通过将位置设置为绝对底部来选择粘性页脚。然后内容会错过按钮div，并将继续自我展开！不是吗？ – 2013-04-30 08:42:03

不，粘脚不仅涉及更多。无论如何，定位页脚绝对不是一个好方法，并且不会导致内容区域变长。这里有一个很好的指导，以正确地做一个粘性的页脚：[链接]（http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting！＆p = 1239966＃post1239966） – 2013-04-30 08:45:22

说你想你的头和按钮有一个固定的宽度，你可以用你的内容做到这一点：

#header.row { height: 60px; top: 0; } 
#content.row { top: 60px; bottom: 120px; border: 1px solid black;} 
#buttons.row { height: 120px; bottom: 0; }

http://jsfiddle.net/5hx5v/

来源

2013-04-30 08:34:59

标题和按钮都可以！但问题是，当决议更改时，内容不会相应地调整大小，并且按钮不会被推到底部！我该如何解决这个问题？ – 2013-04-30 08:39:09

是不是我上面发布的内容...？ – 2013-04-30 08:42:47

不，它不会重新调整大小！ – 2013-04-30 08:45:46

给你有一个固定的高度页脚和头，你能达到什么你想用下面的HTML和CSS

HTML

<div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="buttons"> 
    </div> 
</div>

CSS

html, 
body {min-height:100%; padding:0; margin:0;} 

#wrapper {padding:60px 0 120px 0; position:absolute; top:0; bottom:0; left:0; right:0;} 
#content {min-height:100%;} 
#header {margin-top:-60px; height:60px;} 
#buttons {margin-bottom:-120px; height:120px;}

Example

来源

2013-04-30 09:12:28 Pete

内容div没有根据需要调整大小

回答

相关问题