Fitting middiv zwischen Kopfzeile und Fußzeile

-1

Ich habe eine statische Fußzeile (95px), statische Kopfzeile (70px) und eine dynamische Mitte div, die die Lücke füllen soll, was zwischen ihnen gelassen wird, so dass die Mitte dynamisch ist. Ich habe den folgenden Code:Fitting middiv zwischen Kopfzeile und Fußzeile

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

Die divs Seite & groß sind der mittlere Teil der Website. Ich versuche, dies zu erreichen:

Das Problem ist auf kleineren Bildschirmen. Die gesamte Website sollte auf das Client-Fenster passen und selbst wenn Sie die Größe ändern, sollte sie an das Fenster angepasst werden, indem Sie das mittlere div kleiner/größer machen (hängt davon ab, ob Sie verkleinern oder vergrößern). Scrolling ist nicht möglich, da alles sichtbar ist. Gibt es einen Weg, dies zu erreichen? Ich bin seit Stunden ohne Glück dabei.

Quelle

2017-05-15 RunningFromShia

Ich empfehle flex zu verwenden:

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

ich verwendet habe, für die Demonstration statischen Höhenwert. Wenn Sie mögen, jsfiddle Ich habe auch hier: jsfiddle

Quelle

2017-05-15 12:22:53 NightKn8

Wie kann ich der schwarze Teil machen (Haupt: lastchild) 200px, und der gelbe Teil (Haupt erstes Kind) füllen, was bleibt übrig? – RunningFromShia

Dies wird responsive Design töten, aber hier gehen Sie [JSF] (https://jsfiddle.net/NightKn8/mydqq7zd/2/) auch meine ursprüngliche Antwort aktualisiert. – NightKn8

Ist es möglich, den ersten Abschnitt nicht mit Text überlaufen zu lassen, anstatt eine neue Zeile zu erstellen?

viel Text

– RunningFromShia

Alternativ können Sie calc

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

Beispiel

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

Quelle

2017-05-15 12:40:00 Dmitriy

Wissen Sie, wie man

Text nicht überläuft

Verwenden Sie den folgenden Code für das Layout-Design verwenden.

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

Quelle

2017-05-15 13:22:33 Faizal

Fitting middiv zwischen Kopfzeile und Fußzeile

Antwort

Verwandte Themen