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高度，居中和邊距問題

回答

相關問題