CSS - Сделать содержимое страницы заполнением всей высоты экрана

Я новичок в CSS и вам нужна помощь. Хотя это кажется простым решением, я уже работаю над этой проблемой около 4 часов. Я нашел много подобных вопросов в Интернете, но каждый случай особенно отличается от моего, и «решения» не могут решить мою проблему (уже пробовали большинство из них).CSS - Сделать содержимое страницы заполнением всей высоты экрана

Вот основная структура моей страницы HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html > 
<head> 
    <title>Test</title> 
</head> 
<body> 

    <div id="main"> 

     <div id="head"> 
      <div id="head_content"> 
       HEARDER 
      </div> 
     </div> 

     <div id="body"> 

      <div id="menu"> 
       MENU 
      </div> 

      <div id="page"> 
       PAGE CONTENT 
      </div> 

     </div> 

     <div id="foot"> 
      <div id="foot_content"> 
       FOOTER 
      </div> 
     </div> 

    </div> 

</body> 
</html>

А вот CSS Я пытаюсь реализовать:

html { 
    height: 100%; 
} 

body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height: 100%; 
    min-height: 100%; 
    background: #DEDEDE; 
} 

#main { 
    width: 100%; 
    min-height:100%; 
    position:relative; 
} 

#head { 
    width: 100%; 
    height: 58px; 
    border-bottom: 1px solid #115293; 
    background-color: #1976D2; 
} 

#head #head_content { 
    width: 1000px; 
    padding: 6px; 
    color: #FFFFFF; 
    margin: 0 auto; 
    text-align: center; 
} 

#body { 
    width: 1000px; 
// height: 100%; 
// min-height: 100%; 
    margin: 0 auto; 
// padding-bottom: 50px; 
    border-left: 1px solid #BFBFBF; 
    border-right: 1px solid #BFBFBF; 
} 

#body #menu { 
    float: left; 
    width: 220px; 
// height: 100%; 
// min-height: 100%; 
    background-color: #94C9FF; 
} 

#body #page { 
    overflow: hidden; 
// height: 100%; 
// min-height: 100%; 
    padding: 10px; 
    color: #5C5C5C; 
    border-left: 1px solid #BFBFBF; 
    background-color: #FFFFFF; 
} 

#foot { 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 58px; 
    color: #FFFFFF; 
    border-top: 1px solid #115293; 
    background-color: #1976D2; 
} 

#foot #foot_content { 
    position: relative; 
    width: 1000px; 
    padding: 6px; 
    margin: 0 auto; 
    text-align: center; 
}

Obs: Прокомментированные линии являются одними из решений я уже пытался.

Вот что я получил до сих пор:

И, наконец, вот что мне действительно нужно:

источник

2017-02-12 Guybrush

u просто отсутствует свойство высоты для #main. добавьте это и добавьте высоту назад в тело, #page #menu со значением, установленным на 100%. https://jsfiddle.net/9pao4qs1/ – JungJoo

@JungJoo, делая этот путь, страница идет до деления ноги ... Я бы хотел, чтобы foot div находился в последней нижней части страницы. Вы знаете, как исправить? Спасибо! – Guybrush

@JungJoo, я использовал в обертке (#body div) этот параметр height: calc (100% - Npx) и мог решить проблему. Но теперь у меня другая проблема, когда контент больше экрана, он автоматически не увеличивает высоту ... https://jsfiddle.net/9pao4qs1/2/ – Guybrush

Причина вы возникли проблемы при получении #body DIV быть полная высота оставшегося пространства потому, что каждый из элементов оборачивания необходимо height:100% не только один из них. Это означает, что #main, #body, #page и #menu.

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    background: #DEDEDE; 
 
} 
 

 
#main { 
 
    width: 100%; 
 
    min-height:100%; 
 
    position:relative; 
 
    height:100%; 
 
} 
 

 
#head { 
 
    width: 100%; 
 
    height: 58px; 
 
    border-bottom: 1px solid #115293; 
 
    background-color: #1976D2; 
 
} 
 

 
#head #head_content { 
 
    width: 1000px; 
 
    padding: 6px; 
 
    color: #FFFFFF; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
#body { 
 
    height:100%; 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    border-left: 1px solid #BFBFBF; 
 
    border-right: 1px solid #BFBFBF; 
 
} 
 

 
#body #menu { 
 
    float: left; 
 
    width: 220px; 
 
    background-color: #94C9FF; 
 
    height:100%; 
 
} 
 

 
#body #page { 
 
    overflow: hidden; 
 
    padding: 10px; 
 
    color: #5C5C5C; 
 
    border-left: 1px solid #BFBFBF; 
 
    background-color: #FFFFFF; 
 
    height:100%; 
 
} 
 

 
#foot { 
 
    position:absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 58px; 
 
    color: #FFFFFF; 
 
    border-top: 1px solid #115293; 
 
    background-color: #1976D2; 
 
} 
 

 
#foot #foot_content { 
 
    position: relative; 
 
    width: 1000px; 
 
    padding: 6px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
}

<html > 
 
<head> 
 
    <title>Test</title> 
 
</head> 
 
<body> 
 

 
    <div id="main"> 
 

 
     <div id="head"> 
 
      <div id="head_content"> 
 
       HEARDER 
 
      </div> 
 
     </div> 
 

 
     <div id="body"> 
 

 
      <div id="menu"> 
 
       MENU 
 
      </div> 
 

 
      <div id="page"> 
 
       PAGE CONTENT 
 
      </div> 
 

 
     </div> 
 

 
     <div id="foot"> 
 
      <div id="foot_content"> 
 
       FOOTER 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
</body> 
 
</html>

источник

2017-02-12 05:44:00

Привет, Дилан! Странно, я добавил комментарий здесь «вчера» (4 часа ночи), но он исчез ... Ну, я уже пробовал 100-процентную высоту так же, как и вы, но проблема в том, что мне нужна дека ноги в последней нижней части страницы, и когда мы добавляем эту 100% -ную высоту, есть часть страницы перед делением ноги. Вы знаете, как исправить? Благодаря! – Guybrush

Я использовал в обертке (#body div) этот параметр height: calc (100% - Npx) и мог решить проблему «по высоте». Но теперь у меня другая проблема, когда контент больше экрана, он автоматически не увеличивает высоту ... https://jsfiddle.net/9pao4qs1/2/ ... Пожалуйста, вы знаете, как решить? Благодаря! – Guybrush

Ну, еще один шаг донн, но все еще есть проблемы ... Теперь код работает с динамическим контентом (гибкая высота), нижний колонтитул всегда остается в конце страницы (экран). Но вертикальные границы содержимого не соответствуют высоте ... Пожалуйста, посмотрите https://jsfiddle.net/r56oqg41/ – Guybrush

Вы можете сделать это в следующем way--

Просто используйте блок высоты как vh(viewport height) относительно окна просмотра. Добавьте остальную часть вашего css, чтобы получить желаемый эффект ширины.

фотографии сниппет

#main { 
 
    background-color:blue; 
 
    height: 10vh; 
 
    } 
 
#body { 
 
    background-color:grey; 
 
    height:80vh; 
 
    } 
 
#foot { 
 
    background-color:blue; 
 
    height: 10vh; 
 
    }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html > 
 
<head> 
 
    <title>Test</title> 
 
</head> 
 
<body> 
 

 
    <div id="main"> 
 

 
     <div id="head"> 
 
      <div id="head_content"> 
 
       HEARDER 
 
      </div> 
 
     </div> 
 

 
     <div id="body"> 
 

 
      <div id="menu"> 
 
       MENU 
 
      </div> 
 

 
      <div id="page"> 
 
       PAGE CONTENT 
 
      </div> 
 

 
     </div> 
 

 
     <div id="foot"> 
 
      <div id="foot_content"> 
 
       FOOTER 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
</body> 
 
</html>

Вы можете найти здесь совместимость ---

vh compatibility

EDIT

Как резерв для устройства VH Я думаю, вы можете использовать javascript. Через javascript вы можете получить размер окна. Затем укажите высоту нижнего колонтитула в процентах от высоты окна.

This question can be good starting point

источник

2017-02-12 05:40:52 neophyte

Привет, неофит! Hummm ... никогда не слышал об этом решении раньше. Вы знаете о совместимости? Завтра я сделаю повторный поиск и тесты и дам вам знать. Сейчас 4 часа. Спасибо! – Guybrush

добавил совместимость браузера в ответ. – neophyte

Ну, это относительный новый параметр CSS, совместимость ограничена, я предпочел бы другой подход на данный момент ... может быть, через год или два этот подход будет лучшим способом решить проблему. Спасибо! – Guybrush

вы можете добавить следующие строки в CSS на основе размера содержимого вам требуется содержание быть, просто изменить пиксели на основе контента, который вы хотите: -

div#page { 
    width: 100%; 
    height: 600px; 
}

Надеюсь, это поможет

источник

2017-02-12 06:19:10

Привет! Я не хочу иметь фиксированную высоту ... нога div должна находиться в последней нижней части экрана ... Спасибо! – Guybrush

CSS - Сделать содержимое страницы заполнением всей высоты экрана

ответ

Смежные вопросы