Wie setzt man die mittlere Höhe 100% abhängig von Div A und Div B mit CSS?

ich versuche, 100% Höhe von Div B
Div-A und Div-B einstellen Höhe
Div-A immer oben
Div-B Fix nicht immer auf der Unterseite

2017-07-28 dhrupal Suthar

Haben Sie nur wünschen, HTML und CSS zu verwenden, oder sind Sie in andere Sprachen vielleicht offen? –

Nein, benutze nur HTML Und css –

können Sie flex-direction: column für diese.

Arbeitsbeispiel:

var header = document.getElementsByTagName('header')[0]; 
 
var main = document.getElementsByTagName('main')[0]; 
 
var footer = document.getElementsByTagName('footer')[0]; 
 
var input = document.getElementsByTagName('input')[0]; 
 

 
function changeHeight() { 
 
var newHeight = document.getElementsByTagName('input')[0].value; 
 

 
header.style.flex = '1 0 ' + newHeight + 'px'; 
 
footer.style.flex = '1 0 ' + newHeight + 'px'; 
 
main.style.height= 'calc(100vh - ' + (newHeight * 2) + 'px)'; 
 
} 
 

 
input.addEventListener('change', changeHeight, false);

body { 
 
display: flex; 
 
flex-direction: column; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
header, footer { 
 
flex: 1 0 100px; 
 
color: rgb(255, 255, 255); 
 
background-color: rgb(127, 127, 127); 
 
} 
 

 
header h2, footer h2 { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
main { 
 
height: calc(100vh - 200px); 
 
overflow: hidden; 
 
} 
 

 
header, footer, main { 
 
text-align: center; 
 
} 
 

 
input { 
 
width: 50px; 
 
margin: 24px; 
 
}

<header><h2>Header</h2></header> 
 

 
<main> 
 
<p>You can vertically resize the <strong>Header</strong> and the <strong>Footer</strong>.</p> 
 

 
<form> 
 
<fieldset> 
 
<legend>Resize height of Header and Footer</legend> 
 
<input type="number" value="100" step="10" min="60" /> 
 
</fieldset> 
 
</form> 
 
</main> 
 

 
<footer><h2>Footer</h2></footer>

Quelle

2017-07-28 12:06:32 Rounin

Aber tun Sie dies nur mit HTML und CSS –

Vielleicht verstehe ich nicht. Diese Lösung ** ist ** nur in HTML und CSS. Das Javascript-Widget soll beweisen, dass es funktioniert. – Rounin

Entschuldigung, ich habe Ihren Code nicht überprüft, es funktioniert gut danke und tut mir leid wieder –

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <base href="/"> 

    <title>test</title> 
    <style> 

.divB{ 
    height: 100vh; 
} 
.divA{ 
    height:64px; 
    position: fixed; 
    top: 0; 

    background:green; 
    width: 100% 
} 
.divC{ 
    height:64px; 
    position: absolute; 
    bottom:0; 
    background:green; 
    width: 100% 

} 
body{ 
    margin: 0 
} 


    </style> 




</head> 

<body style="background:red" > 


    <div class="divA"></div> 
    <div class="divB"></div> 
    <div class="divC"></div> 

</body> 
</html>

Quelle

2017-07-28 11:55:40

Und was ist mit div-c? –

Ich habe es gerade bearbeitet. Überprüfen Sie es erneut. –

PLZ überprüfen Sie es erneut Ihre Ausgabe –

Obwohl Sie nicht jQuery verwenden, aber wenn Sie jQuery verwenden möchten, kann es hilfreich sein ...!

$(document).ready(function() { 
 
    var heightA = $('.a').outerHeight(), 
 
     heightC = $('.c').outerHeight(); 
 
    $('.b').css({ 
 
     'padding-top': heightA, 
 
     'padding-bottom': heightC 
 
    }); 
 
});

* {margin: 0px; box-sizing: border-box;} 
 
.a, .c {height: auto; background: blue; position: absolute; left: 0px; right: 0px;} 
 
.a {top: 0px;} .c {bottom: 0px;} 
 
.b {height: 100vh; position: relative; background: #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="b"> 
 
\t <div class="a"> 
 
\t \t Div A <br /><br /> 
 
\t </div> 
 
    Div B 
 
\t <div class="c"> 
 
\t \t Div C <br /><br /> 
 
\t </div> 
 
</div>

Quelle

2017-07-28 11:57:09

Nur mit HTML und CSS –

Was ist falsch mit der Verwendung von jQuery ..? –

Ich arbeite an ReactJs und nur mit HTML, CSS und reagieren js –

Wie setzt man die mittlere Höhe 100% abhängig von Div A und Div B mit CSS?

Antwort

Verwandte Themen