Html не заполняет всю доступную площадь

Мой «html» div (я не знаю, что еще назвать) не заполняет всю страницу. Он простирается, насколько это возможно, горизонтально, но не вертикально. Если я осмотрю div «html», а затем прокручу вниз достаточно далеко, есть около 1000 пикселей пространства, которое находится за пределами «html» div. Странно то, что в этом пространстве есть другие divs ... Я не понимаю, как они могут существовать там, где нет html.Html не заполняет всю доступную площадь

Причина, по которой это проблема, заключается в том, что я пытаюсь установить нижний колонтитул в нижней части страницы, но он просто фиксирует нижнюю часть моего html, и поэтому он не размещен полностью на снизу, поэтому он пересекает некоторые другие div.

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

custom.css:

@import "bootstrap"; 

html { 
    height: auto; 
    width: 100%; 
} 

body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
    position: relative; 
} 

#footer { 
    position: absolute; 
    width: 100%; 
    height: 60px; 
    bottom: 0; 
    background: green; 
}

application.html.erb

<!DOCTYPE html> 
<html> 
<head><!--...--></head> 
<body 
    <!--...--> 
    <div id="footer"></div> 
    <div class="container"><%= yield %></div> 
</body> 
</html>

Если я устанавливаю языка HTML height: 100%, он, видимо, просто заполняет видимый экран, так что становится даже меньше.

Странно, вся страница посинеет, сделав тело background: blue, хотя тело не распространяется по всей странице. Еще страннее, когда я удаляю атрибут body background и вместо этого устанавливаю html background: blue, размер html остается белым, а оставшаяся часть страницы, которая не включена в html, становится синей.

Кто-нибудь знает, как я могу сделать html заполнить всю страницу?

источник

2015-02-01 Joe Morano

У меня возникает противоположная проблема: высота заполняется, но ширина остается фиксированной. Я пробовал каждый вариант ширины/высоты 100%. Надеюсь, вы найдете решение для нас обоих! –

UPDATE: попробуйте изменить порядок своих элементов (контейнер и нижний колонтитул) и используя следующий CSS (CodePen).

<html> 
    <head></head> 
    <body> 
     <div class="container">Something in my container</div> 
     <div id="footer">Something in my footer</div> 
    </body> 
</html> 

body { 
    background: blue; 
} 

.container { 
    height: 980px; 
    background-color: red; 
    float: left; 
    width: 100%; 
} 

#footer { 
    clear: left; 
    height: 60px; 
    background: green; 
}

Попробуйте установить нижний колонтитул в фиксированное положение и снизу до 0px. Вам не нужно гадать с html или телом здесь, из того, что я понимаю в вашем вопросе.

источник

2015-02-01 22:19:54

Жаль, что я не был более ясен. Я хочу нижний колонтитул внизу _page_, а не _screen_. Но большая проблема заключается в том, что html не занимает все пространство, которое должно быть. –

Я думаю, вы не понимаете, что здесь делает HTML-элемент. Это родительский элемент на странице, что означает, что он заполняет страницу изначально. Элементы нижнего колонтитула и контейнера являются дочерними элементами; они также заполнят полное окно изначально или как указано шириной/высотой 100%/авто. Чтобы поместить нижний колонтитул в нижнюю часть страницы, вы можете переместить контейнер над нижним колонтитулом, поплавать, а затем очистить поплавок в нижнем колонтитуле. Я обновил свой ответ, чтобы показать это. –

T думаю, что это решит вашу проблему

body { 
 
    width: 100%; 
 
    background: blue; 
 
    position: relative; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    bottom: 0; 
 
    background: green; 
 
}

<body <!--...--> 
 
    <div id="footer"></div> 
 
    <div class="container"></div> 
 
</body>

источник

2015-02-01 22:34:17 Adi

Я хочу нижний колонтитул внизу _page_, а не _visible screen_. Таким образом, это должно быть видно только тогда, когда пользователь прокручивается до упора. –

Вы можете перемещать нижний колонтитул под контейнером? и удалите позиционирование на нижнем колонтитуле.

<body> 
    <div class="container"><%= yield %></div> 
    <div id="footer"></div> 
</body>

источник

2015-02-01 22:52:19 Sam

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

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

источник

2016-06-30 00:50:24

Html не заполняет всю доступную площадь

ответ

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