CSS高度，居中和边距问题

我试图创建一个具有从顶部和底部0保证金的页面。但由于某种原因，我无法让所有东西都坚持到顶端和底端。还有一个问题height：虽然我有height:100%;的一切，在<div> S的高度超过该窗口的高度。另外，当屏幕尺寸增加时（例如，它大于1366 * 768），内容不在屏幕中央。CSS高度，居中和边距问题

页有三列，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高度增加以将深灰色区域延伸到最后一行文本的底部。我也想要整个事情的中心，当屏幕尺寸增加时它不能居中。

来源

2013-10-08 sodiumnitrate

你不能使用％值和PX值together.Please使用一个标准。取向的问题，同时缩放由该问题引起的 – jayadevkv

它是在#wrapper<div>使得在顶部的间隙的padding: 10px;。删除将<div> s粘贴到页面顶部。还加入margin: 0 auto;到#wrapper中心页面上的wrapper股利。

来源

2013-10-08 17:11:52 sodiumnitrate

像这样

demo

CSS * {

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

来源

2013-10-08 11:26:35 falguni

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

添加 'clearfix' 以#wrapper指定并删除100％ #wrapper的高度&体

.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-08 11:29:28

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-08 18:28:58 NikeshPathania

CSS高度，居中和边距问题

回答

相关问题