Question

我在页面中有三个div，分别是标题，内容和页脚。标题显示在顶部，没有问题。

以下css无法正常使用内部div（内容）来适应其内容和屏幕显示。

虽然我想

展开内部div以填充屏幕尺寸，页脚保持在底部。
按顺序保留div
始终填写内容

我尝试了很多css解决方案但是没有什么能够完美地在页面和内容中适合div。

.header {
    background-color:  #bf4b4b ;
    /*margin-left: 14%;*/
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 100%;
    height: 80px;
}

.content {
    background-color: #ffffff;
    margin-left: 25%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;

    border-radius: 25px;
    padding: 20px;

    flex: 1 1 auto;
}

.footer {
    background-color:  #243b82 ;
   /* margin-left: 14%;
    float: left;*/
    margin-top: 5px;
    width: 100%;
    height: 80px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    color:white;
    text-align: center;

    /*
    display:inline-block;
    vertical-align:middle;
    */
display: inline-block;
vertical-align: bottom;   


}

请注意其wordpress主题和woocommerce页面需要在内部div中显示

Answer 1

检查此jfiddle并告诉我它是否有效，谢谢。

body{
    margin:0px;
}

.header{
    background-color:#bf4b4b;
    height:80px;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
}

.content{
    height:100vh;
    padding:80px 0px;
    background-color:#FFFFFF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.footer{
    background-color:#243b82;
    height:80px;
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
}

Answer 2

Flex显示屏可能是一个很好的选择。看起来你已经开始走这条路。添加具有完整窗口的最小高度的周围容器“100vh”可能会实现您正在寻找的内容。让我知道这是如何工作的：

<div class="container">
  <div class="header">
  </div>
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>

.container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
}
.header {  
    background-color:  #bf4b4b ;
    /*margin-left: 14%;*/
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 100%;
    height: 80px;
}

.content {
    background-color: #ffffff;
    margin-left: 25%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;

    border-radius: 25px;
    padding: 20px;

    flex: 1 1 auto;
}

.footer {
    background-color:  #243b82 ;
   /* margin-left: 14%;
    float: left;*/
    margin-top: 5px;
    width: 100%;
    height: 80px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    color:white;
    text-align: center;

    /*
    display:inline-block;
    vertical-align:middle;
    */
display: inline-block;
vertical-align: bottom;   


}

http://codepen.io/amishstripclub/pen/gwNGXw?editors=1100

Answer 3

我已使用overflow属性和sticky footer解决了以下问题：

.header {
    background-color:  #bf4b4b ;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 100%;
    height: 80px;
    position: fixed;
    right: 0;
    left: 0;
}

.content {
    background-color: #ffffff;
    margin-left: 25%;
    margin-top: 5%;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    border-radius: 25px;
    padding: 20px;   
    overflow:auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;

}

.footer {
    background-color:  #243b82 ;      
    width: 100%;
    height: 80px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    color:white;
    text-align: center;
}

使内部div适合页面大小和内容

3 个答案: