Question

我有一个静态页脚（95px），静态页眉（70px）和一个动态中间div，它应该填补它们之间留下的空白，所以中间是动态的。我有以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html, body{
    height: 100%;
    max-height: 100%;
}

div.container {
    height: 98%;
}

header, .controls {
    text-align: center;
}
header{
    height: 70px;
    margin-top: 0;
}
.controls {
  display: table;
  height: 95px;
  margin-top: 1%;
  width: 100%;
}

#w1 {
    width:25%
}
#can
    float: left;
    padding: 0;
    margin: 0;
    top: 0;
}
#canTwo{
    float: left;
    padding: 0;
    margin: 0;
    top: 0;

}

#w2{
    width:50%;
border-top: 1px solid black;
}
#w3{ 
    width:25%;  
}

.side{
    float: right;
    width: 150px;
    height: 77%;
    margin: 0;
    border: 1px solid black;
}

.hugetext {

    margin-left: 6px;
}

.side ul {
    float: left;
    list-style-type: none;
    padding: 0;
}
.controlbuttons {
  display: table-cell;
  height: 100%;
  vertical-align: top;
}

.controlbuttons canvas {
  float: left;
  padding: 0;
  margin: 0;
  top: 0;
  height: 100%; 
  width: 100%;
}

.side ul a {
    text-decoration: none;
}

.big {

    border: 1px black solid;
    height: 77%;
    overflow: hidden;
}
</style>
</head>
    <body>

    <div class="container">

    <header>
     hi
</header>

<div class = "side">
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">a</a></li>
    <li><a href="#">a</a></li>
  </ul>
</div>

<div class = "big">
  <div class = "hugetext">
  <h1>hi</h1>
  <p>hi</p>
  <p>hi</p>
  </div>
</div>

<div class="controls">
    <div class="controlbuttons" id="w1"><canvas id = "can" width = '0px' height = '0px'></div>
    <div class="controlbuttons" id="w2"></div>
    <div class="controlbuttons" id="w3"><canvas id = "canTwo" width = '0px' height = '0px'></div>
</div>

</div>
<script>



document.addEventListener("DOMContentLoaded", function(event) {
   fitToContainer();
});
var canvas = document.getElementById("can"),
    ctx    = canvas.getContext('2d'),
    rightCanvas = document.getElementById("canTwo"),
    rightCtx    = rightCanvas.getContext('2d'),
    control = document.getElementsByClassName("controlbuttons")[0];


function fitToContainer(){
    reoffset();


    function reoffset(){

        var h = control.clientHeight;
        var w = control.clientWidth;

        canvas.height = h;

        canvas.width = w;

        rightCanvas.height = h;

        rightCanvas.width = w;

        ctx.fillStyle = "green";
        rightCtx.fillStyle = "green";
        rightCtx.fillRect(0, 0, w, h);
        ctx.fillRect(0, 0, w, h);
    }


}

</script>
</body>
</html>

https://jsfiddle.net/zyjr3m2g/

divs＆amp;大是网站的中间部分。我正在努力实现这个目标：

问题出在较小的屏幕上。整个网站应该适合客户端窗口，即使你调整大小它应该适合窗口通过使中间div更小/更大（取决于你缩小或放大）。因为一切都是可见的，所以不应该有任何滚动。有没有办法实现这个目标？我已经在这几个小时没有运气了。

Answer 1

或者，您可以使用calc

height center content = 100vh - (height header + height footer);
height: calc(100vh - (70px + 95px));

实施例

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  max-height: 100%;
}

body {
  font-size: 18px;
  font-family: 'segoe ui', sans-serif;
  text-align: center;
  text-transform: uppercase;
}

header {
  height: 70px;
  background: #ccc;
  padding: 1em;
}

section {
  display: table;
  width: 100%;
  height: calc(100vh - (70px + 95px));
}

section>aside,
section>article {
  display: table-cell;
  vertical-align: top;
  padding: 1em;
  border: 2px solid #000;
}

section>aside {
  width: 25%;
}

footer {
  height: 95px;
  background: #000;
  color: #fff;
  padding: 1em;
}

＆＃13;

<div class="container">
  <header>header</header>
  <section>
    <article>content</article>
    <aside>sidebar</aside>
  </section>
  <footer>footer</footer>
</div>

＆＃13;

Answer 2

我建议使用flex：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100vh;
}

header {
  flex: 0 0 70px;
  background-color: red;
}

main {
  flex: 0 0 calc(100% - 165px);
  display: flex;
  flex-direction: row;
}

main >:first-child {
  flex: 1 calc(100% - 200px);
  background-color: yellow;
  height: auto;
}

main >:last-child {
  flex: 1 200px;
  background-color: black;
  height: auto;
}

footer {
  flex: 0 0 95px;
  background-color: green;
}

<body>
  <header>
  </header>
  <main>
    <section></section>
    <section></section>
  </main>
  <footer>
  </footer>
</body>

我使用静态高度值进行演示。如果你喜欢jsfiddle，我在这里做了同样的事： jsfiddle

Answer 3

使用以下代码进行布局设计。

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
    padding: 0;
    margin:0;
    height: 100%;
    width: 100%;
}
header {
    height:70px;
    background: #ccc;
}
footer {
    height: 90px;
    background: #ccc;
}
#container{
    height: calc(100% - 160px);
}
#content {
    display: inline-block;
    background: red;
    height: 100%;
    width: calc(100% - 305px);
}
#nav {
    height: 100%;
    display: inline-block;
    background: green;
    width: 300px;
}
</style>
</head>
<body>
<header>Header</header>
<div id="container">
    <div id="content">Content</div>
    <div id="nav">Nav</div>
</div>
<footer>Footer</footer>

</body>
</html>

在页眉和页脚之间安装中间div

3 个答案: