Высота страницы до 100% экрана просмотра?

Начну с того, что я очень новичок в веб-разработке в целом и что это мой самый первый отзывчивый сайт, поэтому, пожалуйста, будьте нежны и помните об этом, я - определение слова noob на этом сцена. Некоторое время искал ответ и не повезло, я надеюсь, что кто-то здесь может помочь мне.

Я пытаюсь создать домашнюю страницу для этого веб-сайта. Дизайн - это просто блок вниз по левой стороне страницы с логотипом вверху, а затем рядом ссылок внизу, все из которых находятся на одном и том же фоне. Справа от этого - одно большое изображение, которое заполняет остальную часть экрана. Я хочу, чтобы вся страница заполнила окно браузера любого устройства, которое просматривается, поэтому абсолютно не требуется прокрутка, т.е. Ширина и высота как 100% окна просмотра. Ширина страницы не дает мне никакой печали, сладко приспосабливаясь к разным размерам экрана, как я этого хочу, с боковой панелью на 20% от ширины и основным изображением на 80%.

Однако высота - это совсем другая история. Я не могу показаться, в любой комбинации CSS, которую я пробовал до сих пор, чтобы иметь возможность вести высоту до 100% окна просмотра. Либо боковая панель слишком короткая, либо основное изображение слишком длинное, либо слишком длинное и т.д. И т.д. Основное изображение, которое я хочу сохранить пропорции, и просто переполняю его div, как требуется, чтобы сохранить большую часть отображаемого изображения, а сторона bar Я просто хочу соответствовать 100% высоты страницы. Вот мой код в настоящее время:

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}

body
{
height: 100%;
margin: 0;
padding: 0;
}

#page 
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}

#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}

#mainimg
{
width: 100%;
overflow: hidden;
}

.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00); 
}

@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}

</style>
</head>

<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
    <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
    <div class="link" id="homelink">Home<!--Home link--></div>
    <div class="link" id="aboutlink">About<!--About link--></div>
    <div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
    <div class="link" id="priceslink">Prices<!--Prices link--></div>
    <div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
    <div class="link" id="contactlink">Contact<!--Contact link--></div>
    <div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>

Любая помощь с этим будет действительно оценена и не стесняйтесь указывать на массовые ошибки, связанные с любителями. Я готов критиковать и учиться на этом. Благодаря

Ответы

Ответ 1

Я сделал вам базовую настройку, чтобы показать, как вы это сделаете. Лучший способ, которым я нашел установить высоту до 100%, - это использование jQuery/Javascript. Вы можете найти высоту окна, а затем ввести его в css с его использованием.

Как это работает, var wH = $(window).height(); находит высоту и превращает ее в число. Затем, когда вы используете $('.sideBar').css({height: wH});, вы вводите высоту в css sideBar.

JQuery

function windowH() {
   var wH = $(window).height();

   $('.sideBar, .mainImg').css({height: wH});
}

windowH();

Эта функция, которую я написал, дает этим двум элементам высоту окна. Это позволит этим двум элементам быть на 100% от любого окна браузера.

Я также рекомендую превратить этот nav в ul, который я включил в скрипт, чтобы показать, как это возможно.

JSFIDDLE (удалите 'show' в конце url, чтобы увидеть код)

Следующее, что вам нужно исследовать, - это media queries, чтобы настроить контент для лучшей адаптации к мобильным устройствам. Рассмотрите возможность изменения sideBar на горизонтальную навигацию, когда на мобильных устройствах.

Если вы хотите использовать только метод CSS, тогда вы можете сделать что-то вроде этого,

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

Добавив height & width к 100% в html/body, вы можете использовать height: 100% для других элементов для заполнения всей страницы.

Обратитесь к этому JSFIDDLE, чтобы узнать, как это работает.

Полезно прочитать о адаптивном веб-дизайне

Ответ 2

Вот просто упрощенный пример кода HTML:

<div id="welcome">
    your content on screen 1
</div>
<div id="projects">
    your content on screen 2
</div>

и использует CSS с помощью vh:

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

Отсюда: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Это работает для меня.

Ответ 3

В Chrome достаточно просто добавить display: flex в body.

В Firefox вы должны добавить height: 100vh, чтобы получить желаемый результат. А margin: 0 избавится от надоедливых полос прокрутки.

<body style="display:flex; height: 100vh; margin: 0;">
  <div style="background-color: red; flex:1;"></div>
  <div style="background-color: green; flex:2;"></div>
  <div style="background-color: blue; flex:1;"></div>
</body>

Ответ 4

Пример кода для точного покрытия высоты страницы.

HTML 

<div class="container">  
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    Main content
  </div>
</div>

CSS 

html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.container {
 max-width: 1020px;
 margin: auto;
 height: 100%;
 background: #ddd;
 padding:16px;
 box-sizing:border-box
}
.header,.content{
 background:#fff;
 padding:16px
}
.content{
 margin-top:16px;
 min-height:calc(100% - 160px);
}

Пример ссылки:https://codepen.io/rahdirs/pen/jeRVod