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

ProgramBox

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

Post author:admin
Запись опубликована:21 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Ниже мой CSS amp; HTML, вот моя скрипка, где в заголовке я использую высоту 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>

1. используйте отступы / поля

2. Он поместится везде, даже если вы не добавите высоту, но какова ваша конечная цель?

3. Я не могу добавить отступы, потому что у меня есть изображение в баннере, которое должно занимать весь заголовок

4. позвольте мне сказать вам, что, как я понимаю, не имеет отношения к высоте заголовка, заголовок должен располагаться вверху страницы? и ваш контент должен появиться после этого?

5. да, но теперь проблема в том, что я использую height: calc(100% - 100px); в своем CSS, поэтому мне приходится указывать пиксели в заголовке, чего я не могу сделать

Ответ №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); 
});

1. это работает хорошо, но когда я сворачиваю страницу, мне нужно перезагрузить страницу, чтобы получить отступ. Можно ли это решить?

2. Если страница перезагружается, это будет выполнено, и она будет вести себя так же, как загрузка. И почему вы хотите перезагрузить страницу, возвращаясь из минимизации. ?

Ответ №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>

Ответ №3:

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