我如何设置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％

回答

相关问题