我有一个静态页脚(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更小/更大(取决于你缩小或放大)。因为一切都是可见的,所以不应该有任何滚动。有没有办法实现这个目标?我已经在这几个小时没有运气了。
答案 0 :(得分:1)
或者,您可以使用calc
height center content = 100vh - (height header + height footer);
height: calc(100vh - (70px + 95px));
实施例
* {
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;
答案 1 :(得分:0)
我建议使用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
答案 2 :(得分:0)
使用以下代码进行布局设计。
<!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>