-1
私は静的フッター（95px）、静的ヘッダー（70px）、およびそれらの間に残されているギャップを埋めると思われる動的なdivがあります。ヘッダーとフッターの中間の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/
のdiv側の大きな&は、ウェブサイトの中央部分である：私は、次のコードを持っています。 私はこれを達成しようとしています：
問題は、小さな画面上です。ウェブサイト全体はクライアントウィンドウに収まる必要があります。サイズを変更しても、中央のdivを小さく/大きくしてウィンドウに合わせる必要があります（縮小または拡大した場合による）。すべてが見えるので、利用可能なスクロールがあるはずがありません。これを達成する方法はありますか？私は何時も運がなかった。
どのように黒い部分（メイン：ラストチャイルド）を200pxにし、黄色の部分（メインの最初の子）を残すことができますか？ – RunningFromShia
これはレスポンシブなデザインを殺しますが、ここであなたは[JSF]（https://jsfiddle.net/NightKn8/mydqq7zd/2/）に行って元の答えを更新しました。 – NightKn8
新しい行を作成するのではなく、最初のセクションをテキストでオーバーフローさせないようにすることはできますか？多くのテキスト –
RunningFromShia