CSS位置绝对内容区域不增长

时间：2014-06-01 11:19:55

标签： html css position absolute

我正在尝试创建一个设计的HTML。我遇到了一个问题。 CSS n HTML结构是我在此处附加的图像。 我希望页脚位于页面底部，内容区域在增长时应将页脚向下推。但是如果没有内容，内容区域应该直到页脚。 实际上内容区域来自页眉和页脚区域。 我不知道我的结构是否正确。

enter image description here 

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<style>
html, body { height:100%;}
body {
    background: #EBEBEB;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    width:100%;
    height:100%;
    margin: 0 auto;
    position:relative;
}
#header {
    width:100%;
    height:147px;
    background:#999;
    border-bottom:solid 5px #ddd;
    position:absolute;
}
#footer {
    bottom:0;
    width:100%;
    height:170px;
    position:absolute;
    background-color:#ccc;
    border-top:solid 5px #ddd;
}
#contentArea {
    width:300px;
    max-height:100%;
    position:absolute;
    z-index:999;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:120px;
    margin-bottom:100px;
    background:#FFF;
    border:solid 1px red;
}
</style
</head>

<body>

<div id="wrapper">
    <div id="header">Header</div>
    <div id="footer">footer</div>
    <div id="contentArea">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div>
</div>

</body></html>

检查代码here。

5 个答案:

答案 0 :(得分：1)

你可以使用magrin！ 和建议：使用postition:relative;作为主要部分！

<html>
  <head>
    <style>
    *{
        font-family:"Trebuchet MS", Helvetica, sans-serif;
        text-align:center;
    }
    #header,#footer{
        position:relative;
        height:150px;
        background:#ccc;
        border:solid 1px #bbb;
    }
    #footer{
        bottom:0;
    }
    #body{
        position:relative;
        margin-top:-50px;
        margin-bottom:-50px;
        min-height:250px;
        background:#aaa;
        width:70%;
        margin-right:auto;
        margin-left:auto;
        padding:50px 15px;
        box-shadow:0px 0px 10px 1px #aaa;
        border:solid 1px #999;
        opacity:0.92;
        z-index:999;
    }
    </style>
  </head>
  <body>
    <div id='header'>
        HEADER
    </div>
    <div id='body'>
        BODY
    </div>
    <div id='footer'>
        FOOTER
    </div>
  </body>
</html>

http://jsfiddle.net/mostafaznv/2zfjc/

答案 1 :(得分：0)

边距有几个问题：

#contentArea {
    margin-top:152px;
    margin-bottom:175px;
}

如果进行数学计算，边框的标题高度为147px加上5px。页脚高度为170px加边框为5px。由于您使用的是绝对定位，因此所有内容都是相对于最近定位的父级（即包装器）设置的。

答案 2 :(得分：0)

也许是这样的：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            html, body {
                height: 100%;
                width: 100%;    
                margin: 0;
                padding: 0; }
            .header {
                height: 140px;
                width: 100%;
                background: #999;
                border-bottom: solid 5px #ddd; }
            .content {
                height: calc(100% - 280px);
                width: 100%;
                background: #EBEBEB; }
            .content-fixed {
                position: fixed;
                height: auto;
                width: 300px;
                top: 90px;
                left: calc(50% - 150px);
                border: 1px solid red;
                background-color: #FFF;
            }
            .footer {
                height: 140px;
                width: 100%;
                background-color: #ccc;
                border-top: solid 5px #ddd; }        
        </style>
    </head>
    <body>
        <div class="header"></div>
        <div class="content"></div>
        <div class="content-fixed">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="footer"></div>
    </body>
</html>

http://jsfiddle.net/LOLKFC/vMz5s/

答案 3 :(得分：0)

我在容器的底部添加了一个新的div并使其成为绝对值并添加一个新的CSS。

为新的css：

html, body { height:100%;}
body {
    background: #EBEBEB;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    width:100%;
    height:100%;
    /*margin: 0 auto; when you make the width 100% the margin auto is useless */
    position:relative;
}
#header, #footer {
    width:100%;
    height:147px;
    background:#999;
    border-bottom:solid 5px #ddd;
}
#contentArea {
    margin: -30px auto;
width: 300px;
background: #FFF;
border: solid 1px red;
position: relative;
}
#contentArea .containerFooter{
    width: 300px;
height: 0px;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
}

用于新HTML：

<div id="wrapper">
    <div id="header"></div>
    <div id="contentArea">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
        <div class="containerFooter"></div></div>
    <div id="footer"></div>
</div>

查看我的更新http://jsfiddle.net/CDeLe/62/

答案 4 :(得分：0)

那么，

这是我想要的正确代码。

    html, body { height:100%;}
body { height:100%; margin: 0px;}
#wrap {
    width:100%;
    height:100%;
    margin: 0 auto;
}
#header {
    width:100%;
    height:50px;
    background:blue;
}
#footer {
    width:100%;
    height:50px;
    background:green;
    position:relative;
    margin-top:-30px;
}
#content {
    background:#ebebeb;
    width:450px;
    height: 100%;
    display:table;
    margin:auto;
    padding:10px;
    position:relative;
    z-index:20;
    top:-15px;
    box-shadow: 0px 0px 3px #666;
}

HTML 

<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
    <div id="footer">footer</div>
</div>

http://jsfiddle.net/angel3m/h6YYa/

相关问题
最新问题