divの高さを100％に設定するにはdivを使用し、divはCSSを使用しますか？

私は
本部-Aと事業部-Bの高さ
本部、常にトップ
本部-Bには常に底のを修正していない事業部Bの100％の高さを設定しようとしています

2017-07-28 dhrupal Suthar

あなただけのHTMLとCSSを使用したい、またはあなたが他の言語に多分開いているのですか？ –

いいえ、HTMLとCSSを使用してください –

あなたはこのためflex-direction: columnを使用することができます。

実施例：

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>

出典

2017-07-28 12:06:32 Rounin

HTMLとCSSを使用してください。 –

おそらく私は理解しません。このソリューション**はHTMLとCSSでのみ**です。 javascriptウィジェットは、それが動作することを証明するためにそこにあります。 – Rounin

申し訳ありませんコードをチェックしていませんでした。うまくいきました。ありがとうございました。もう一度 –

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

出典

2017-07-28 11:55:40

div-cについて –

私はちょうどそれを編集しました。もう一度チェックしてください。 –

plz出力をもう一度確認してください –

あなたはjQueryを使用していませんが、jQueryを使いたい場合は参考になるかもしれません...！

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

出典

2017-07-28 11:57:09

HTMLとCSSを使用するだけです –

jQueryを使用すると何が問題になりますか？ –

私はReactJsに取り組んでおり、HTML、CSS、およびリアクションjsだけを使用しています。 –

divの高さを100％に設定するにはdivを使用し、divはCSSを使用しますか？

答えて

関連する問題