ヘッダーに高さを追加することなくレイアウトを修正することができます

Question

以下は私のCSSです&ここに私のfiddleというヘッダーがあります。ヘッダーには50pxの高さを使用していますが、ヘッダーに高さを追加する必要はありませんレイアウトは、すべてのページに収まらなければならない

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
#page { 
 
    height: 100%; 
 
} 
 

 
#header { 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 

 
#content { 
 
    height: calc(100% - 100px); 
 
    background: grey; 
 
    overflow: auto; 
 
} 
 

 
#footer { 
 
    height: 50px; 
 
    background: blue; 
 
}

<div id="page"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    <div id="footer">Footer</div> 
 
</div>

Answer 1

これはあなたを助けるかもしれない、

$(document).ready(function() { 
    //Get the Outer height of the header 
    var headerHeight = $('#header').outerHeight(); 
    //Add the same height to the content as padding top.  
    $('#content').css('padding-top', headerHeight); 
}); 

Answer 2

行の高さを指定せずにページ全体を縦に塗りたい場合は、flexを使用します。 この例では、コンテナの子のoverflow: auto（コンテナ自体にはoverflow: hidden）のおかげで、ヘッダーとフッターもスティッキーになっています。もちろん

body {margin:0;padding:0;} 
 
#page { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 
#page>* { 
 
    overflow: auto; 
 
} 
 
#header { 
 
    background-color: red; 
 
} 
 
#footer { 
 
    background-color: red; 
 
} 
 
#content { 
 
    background-color: lightgrey; 
 
    flex:2; 
 
}

<div id="page"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <div id="footer">Footer</div> 
 
</div>

Answer 3

ません。ブラウザーはヘッダーの表示方法を知っている必要があります。他の状況でヘッダーが長くなる場合は、heightの代わりにmin-heightプロパティを使用できます。あなたが他の問題に直面した場合、これは私があなたのアイデアを実装するより良い方法です。ここで は、CSSコードです：

* { 
    box-sizing: border-box; 
} 

html, 
body { 
    margin: 0; 
} 

#header { 
    position: fixed; 
    top:0; 
    right:0; 
    left:0; 
    min-height: 50px; 
    background: yellow; 
} 

#content { 
    padding:100px 0; 
    background: grey; 
} 

#footer { 
    position: fixed; 
    bottom:0; 
    right:0; 
    left:0; 
    min-height: 50px; 
    background: blue; 
}