如何讓我的內容達到100％的高度？

只是一個簡單的結構。試圖讓我的內容包裝具有左右邊框並且伸展100％的高度。看起來很簡單但不起作用。我錯過了什麼嗎？如何讓我的內容達到100％的高度？

<?php get_header(); ?> 
    <div class="content_wrapper clearfix"> 
    </div> 
<?php get_footer(); ?>

// HEADER

<body <?php body_class(); ?>> 
     <div class="header clearfix"> 
      <div class="header_wrapper clearfix"> 
       <div class="logo_wrapper"> 
        <div class="logo"> 
        </div> 
       </div> 
      </div> 
     </div>

//頁腳

 <?php wp_footer(); ?> 
    </body> 


</html>

// CSS

body { 
width:100%; 
height:100%; 
line-height: 1; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight:300; 
} 
.content_wrapper { 
width:960px; 
height:100%; 
margin:0px auto 0px auto; 
border-left:1px #ccc solid; 
border-right:1px #ccc solid; 
} 

.header { 
width:100%; 
height:80px; 
background:#FFF; 
border-bottom:1px #ccc solid; 
} 
.header_wrapper { 
width:960px; 
margin:0px auto 0px auto; 
height:80px; 
border-left:1px #ccc solid; 
border-right:1px #ccc solid; 
} 
.logo_wrapper { 
width:187px; 
height:63px; 
padding-top:8px; 
} 
.logo { 
width:187px; 
height:63px; 
background:url(../images/bit_ball_ai.png) no-repeat; 
margin-left:20px; 
}

感謝

來源

2013-05-19 LightningWrist

當你說了你想要的內容100％，你說你希望它看起來像HTTP：// mokker。 azurewebsites.net/其中頁眉和頁腳位於頂部和底部，中間有完整的內容/背景，或者您是否希望內容實際上達到100％。我問，因爲100％的內容高度與頁眉和頁腳會給你滾動條，因爲該內容實際上佔據了100％的視口。希望我清楚。 – origin1tech

@ C.Hazleton no。試圖創建一箇中心960像素的瀏覽器高度爲100％的內容區域，左邊框和右邊框，因此看起來好像有側邊欄。就像左邊和右邊的欄和中間的內容 – LightningWrist

這裏是使一些100％高度的萬無一失的方法：

#element { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
}

像你這樣做會使其填滿所有可用的空間，但如果它需要是相對的或靜態定位，你會怎麼做：

#element { 
    min-height: 100%; 
}

如果這不起作用，這是因爲其中一個父元素不是100％的高度。從看HTML看起來，似乎唯一的父元素是HTML和BODY，但您只能在BODY上定義100％的高度，這仍將受到HTML的限制。因此，下一步將是確保你的HTML和BODY元素都有100％的高度：

html, body { 
    height: 100%; 
} 

html > body > #element { 
    height: 100%; 
    /* more styles */ 
}

來源

2013-05-19 20:36:36 alt

如何讓我的內容達到100％的高度？

回答

相關問題