Question

我试图设置Div B的100％高度
Div-A和Div-B高度未修复
Div-A始终位于顶部
Div-B总是在底部

Answer 1

您可以使用flex-direction: column。

工作示例：

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

虽然你没有使用jQuery但是如果你想使用jQuery它可能会有帮助......！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何设置中间div高度100％取决于使用css的Div A和Div B？

3 个答案:

如何设置中间div高度100％取决于使用css的Div A和​​Div B？

3 个答案:

如何设置中间div高度100％取决于使用css的Div A和Div B？