適合頁眉和頁腳之間的中間div

-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更小/更大（取決於如果你縮小或放大）。因爲一切都是可見的，所以不應該有任何滾動可用。有沒有辦法做到這一點？我一直在這上好幾個小時，沒有運氣。

來源

2017-05-15 RunningFromShia

我建議使用柔性：示範

* { 
 
    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

來源

2017-05-15 12:22:53 NightKn8

我怎樣才能讓黑色部分（main：lastchild）200px，黃色部分（主要第一個孩子）填充剩下的東西？ – RunningFromShia

這會殺死響應式設計，但是在這裏你去[JSF]（https://jsfiddle.net/NightKn8/mydqq7zd/2/）也更新了我的原始答案。 – NightKn8

是否有可能使第一部分不與文本溢出一個溢出，而不是創建一個新行？

很多文字

– RunningFromShia

或者，你可以使用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; 
 
}

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

來源

2017-05-15 12:40:00 Dmitriy

你知道如何讓

文字不溢出

使用您的佈局設計下面的代碼。

<!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>

來源

2017-05-15 13:22:33 Faizal

適合頁眉和頁腳之間的中間div

回答

相關問題