0

我正在尝试创建一个从顶部和底部有 0 边距的页面。但是由于某种原因，我无法让所有东西都坚持顶部和底部。还有一个height问题：虽然我什么height:100%;都有，但<div>s的高度超过了窗口的高度。此外，当屏幕尺寸增加时（例如，当它大于 1366*768 时），内容不会在屏幕中居中。

该页面有三列，用标签float:left;包裹。<div>我主要有这样的html代码：

<div id="wrapper">
    <div class="col" id="col1"></div>
    <div class="col" id="col2"></div>
    <div class="col" id="col3"></div>
</div>

我拥有的修改这些的 CSS 是：

body, html {
    background-color: darkgray;
    margin: 0;
    height: 100%;
    width: 100%;
}


#wrapper {
    width: 80%;
    height: 100%;
    margin-top: 0;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 0;
    padding: 10px;
    background-color: #666;
    color: white;
    min-width: 722px;
    max-width: 1119px;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: 0px 0px 25px black;
}


.col {
    /*background-color: red;*/
    height: 100%;
    float:left;
    margin-top: 0;
    margin-right: 0.6667%;
    margin-left: 0.6667%;
}

#col1 {
    width: 24%;
}

#col2 {
    width: 48%;
    box-shadow: 0px 0px 5px black;
}

#col3 {
    width: 24%;
}

您可以在此 jsfiddle中查看该页面。

我想让<h1>（深灰色区域）粘在顶部，以及作为<div>列的其他 s。我还希望高度是屏幕大小，除非单击第二个标题，在这种情况下，我希望 div 高度增加以将深灰色区域扩展到最后一行文本的底部。我还想将整个事物居中，当屏幕尺寸增加时，它无法居中。

4

4 回答 4

0

试试这个：http: //jsfiddle.net/JN8Cs/

将“clearfix”添加到#wrapper 并删除#wrapper & body 的 100% 高度

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
于 2013-10-08T11:29:28.347 回答
0 
I have update your css property like **#wrapper** I just Add display:table;

 #wrapper {
    width: 80%;
    height: 100%;
    margin-top: 0;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 0;
    padding: 10px;
    background-color: #666;
    color: white;
    min-width: 722px;
    max-width: 1119px;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: 0px 0px 25px black;
   display:table;
}
于 2013-10-08T18:28:58.583 回答
0

像这样

演示

css *{

margin:0;
    padding:0;
}
    body, html {
        background-color: darkgray;
        margin: 0;
        height: 100%;
        width: 100%;
    overflow:hidden;
    }
于 2013-10-08T11:26:35.487 回答
0

正是padding: 10px;in the#wrapper <div> 导致了顶部的间隙。删除将<div>s 粘在页面顶部的那个。还将页面上的 div添加margin: 0 auto;到#wrapper居中。wrapper

于 2013-10-08T17:11:52.830 回答