Question

我正在尝试创建一个从顶部和底部有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%;
}

您可以看到页面here in this jsfiddle。

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

Answer 1

喜欢这个

<强> demo

<强> CSS * {

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

Answer 2

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

将'clearfix'添加到#wrapper并删除#wrapper＆amp;的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%;
}

Answer 3

padding: 10px; #wrapper中的<div>会导致顶部的差距。删除它会将<div>粘贴到页面顶部。同时将margin: 0 auto;添加到页面上#wrapper div居中的wrapper。

Answer 4

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;
}

CSS高度，居中和边距问题

4 个答案: