如何使这些div组响应？

时间：2017-10-04 13:34:41

标签： html css

似乎无论我做什么我都可以通过这个特殊的div来填充视口..我已经尝试用负值推..但要么超过屏幕。我的意图是保持阴影..并仍然填满屏幕。应该只有一个滚动条，那就是#divBody里面的滚动条

我已经能够创建粘性页脚但是我使用推送div丢失了我的标题。

我真的很喜欢这个标题/正文/页脚布局的布局。希望有人能帮助我。

＆＃13;
＆＃13; 
 #mainContainer {
    height: 100%;
    margin: 2%;
    border: 1px solid white;
    background-color: white;
    box-shadow: 0 2px 7px #292929;
    -moz-box-shadow: 0 2px 7px #292929;
    -webkit-box-shadow: 0 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
    #divBody {
        margin-top: 0;
        min-height: 150px;
        max-height: 500px;
        overflow: auto;
    }
    
    #divBody,
    #divHeader,
    #divFooter {
        padding: 1px;
    }
    
    #divHeader {
        height: 40px;
        border-bottom: 1px solid #EEE;
        background-color: #fff;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 16px;
        font-family: sans-serif;
        overflow: hidden;
    }
    #divFooter {
    font-size: 17px;
    height: 40px;
    background-color: white;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}
＆＃13; 
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="temp.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="mainContainer">
        <div id="divHeader">
            header
        </div>
        <div id="divBody" class="simplebar">
         body<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
        </div>
        <div id="divFooter">
            footer
        </div>
    </div>
</body>


</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

正如我在评论中所述，您需要将height设置为100vh并删除max-height上设置的#divBody。 width:100%应该足够了，不需要width:100vw。

vh单位是相对测量值，代表垂直高度（视口）。详细了解here

＆＃13;
＆＃13; 
 #mainContainer {
    height: 100%;
    margin: 2%;
    border: 1px solid white;
    background-color: white;
    box-shadow: 0 2px 7px #292929;
    -moz-box-shadow: 0 2px 7px #292929;
    -webkit-box-shadow: 0 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
    #divBody {
        margin-top: 0;
        min-height: 150px;
        height:100vh;
        overflow: auto;
    }
    
    #divBody,
    #divHeader,
    #divFooter {
        padding: 1px;
    }
    
    #divHeader {
        height: 40px;
        border-bottom: 1px solid #EEE;
        background-color: #fff;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 16px;
        font-family: sans-serif;
        overflow: hidden;
    }
    #divFooter {
    font-size: 17px;
    height: 40px;
    background-color: white;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}
＆＃13; 
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="temp.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="mainContainer">
        <div id="divHeader">
            header
        </div>
        <div id="divBody" class="simplebar">
         body<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
        </div>
        <div id="divFooter">
            footer
        </div>
    </div>
</body>


</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果我理解正确，您希望页眉和页脚始终可见，并且divBody占用浏览器高度中的剩余空间（因此唯一的滚动条位于divBody上）。

这是一个有效的例子。有几个calc可以补偿边框宽度。

＆＃13;
＆＃13; 
html {
  height: 100%;
  margin:0;
}

body {
  height: 96vh;
  margin: 0;
  padding: 2vh;
}

#mainContainer {
    height: calc(100% - 4px);
    border: 1px solid white;
    background-color: white;
    box-shadow: 0 2px 7px #292929;
    -moz-box-shadow: 0 2px 7px #292929;
    -webkit-box-shadow: 0 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#divBody {
    margin-top: 0;
    height: calc(100% - 90px);
    overflow: auto;
}

#divBody,
#divHeader,
#divFooter {
    padding: 1px;
}

#divHeader {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #fff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 16px;
    font-family: sans-serif;
    overflow: hidden;
}
#divFooter {
    font-size: 17px;
    height: 40px;
    background-color: white;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}
＆＃13; 
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="temp.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="mainContainer">
        <div id="divHeader">
            header
        </div>
        <div id="divBody" class="simplebar">
         body<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
        </div>
        <div id="divFooter">
            footer
        </div>
    </div>
</body>


</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题