без добавления высоты в заголовок мы можем исправить макет

Question

Ниже мой CSS & HTML здесь мой fiddle, где в заголовке я использую высоту 50 пикселей, есть ли способ, когда мне не нужно добавлять высоту в заголовок, и все же макет должен соответствовать во всем странице

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

Конечно, нет. Браузер должен знать, как вы хотите, чтобы он отображал заголовок. Если заголовок может быть длиннее в других ситуациях, вы можете использовать свойство 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; 
}