我如何設置Div高度爲100％

-1

我要瘋了試圖找出如何使.footer和div .content有height:100%。我知道如何讓.footer堅持到底，但是我的div . content沒有到達底部頁面。我知道我可以增加div content的最小高度，但它不能解決問題。我如何設置Div高度爲100％

這裏是my site

這正是我試圖做的，但有一個困難時期試圖使中心頁面和頁腳轉到頁的底部。

鏈接here

CODE

<body> 
    <div class="header"> 
    </div> 
    <div class="content"> 
     <div class="page-content"> 
      <div class="column_4"></div> 
      <div class="column_5"></div> 
      <div class="column_6"></div> 
      <div class="column_7"></div> 
     </div> 
    </div> 
    <div class="footer"> 
    </div>  
    <div style="display:none"> 
    </div> 
</body> 

body { 
    font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
    margin:0; 
    font-size: 15px; 
    font-weight: 400; 
    line-height: 157%; 
    color: #666666; 
    padding:0; 
} 
.content { 
    min-height: 0; 
.header { 
    min-height:300px; 
    background-color:#000000; 
} 
.footer { 
    min-height:300px; 
    background-color:#000000; 
} 
    background-color:#9E959E; 
}

我現在有什麼您的建議後：

html,body { 
    height:100%; 
} 
body { 
    font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
    margin:0; 
    font-size: 15px; 
    font-weight: 400; 
    line-height: 157%; 
    color: #666666; 
    padding:0; 

} 
.content { 
    min-height: 0; 
    background-color: #9E959E; 
    height: calc(100% - 50px); /* add this */ 
} 

.footer { 
    min-height: 25px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color:#000000; 
    clear: both; 
    position:fixed; 
    right:0px; 
    left:0px; 
    bottom:0px; 
} 

.header { 
    min-height:300px; 
    background-color:#000000; 
} 
@media only screen and (min-width : 768px) { 
    .header { 
     min-height: 25px; 
    } 
} 
@media only screen and (min-width : 992px) { 
    .header { 
     min-height: 25px; 
    } 
} 



<body> 
    <div class="header"> 
    </div> 
    <div class="content"> 
     <div class="page-content"> 
      <div class="column_4"></div> 
      <div class="column_5"></div> 
      <div class="column_6"></div> 
      <div class="column_7"></div> 
     </div> 
    </div> 
    <div class="footer"> 
    </div>  
    <div style="display:none"> 
    </div> 
</body>

來源

2015-02-23 user1727251

您的演示網站是非常混亂的。首先明確你想要修復的地方在哪裏？ – Era 2015-02-23 07:34:16

我願意幫忙，但我無法弄清楚你想要解釋的是什麼。在您的示例網站上，我看到底部有一個小小的頁腳，以及100％高度的div＃內容。這不是你想要達到的目標嗎？然後你說_製作中心頁面和頁腳到page_的底部，我不明白。將中間頁面放在頁面底部？沒有什麼被稱爲「中心頁面」...無論如何，你想看看Flexbox，佈局英雄，本地CSS3屬性：http://philipwalton.github.io/solved-by-flexbox/和http：/ /css-tricks.com/snippets/css/a-guide-to-flexbox/ – 2015-02-23 09:04:16

寫

.footer { 
min-height: 25px; 
margin-left: auto; 
margin-right: auto; 
background-color:#000000; 
clear: both; 
}

代替

.footer { 
min-height: 25px; 
margin-left: auto; 
margin-right: auto; 
background-color:#000000; 
clear: both; 
position:fixed; 
right:0px; 
left:0px; 
bottom:0px; 
}

這將會把旁邊的內容腳註 link here

來源

2015-02-23 07:40:37 Rasel

我如何設置Div高度爲100％

回答

相關問題