2015-01-27 2 views
0

После двухдневного исследования я все еще не могу найти решение. Я использую изображение в качестве фона для моего сайта bootstrap 2.3.2. Я пытаюсь выяснить, как заставить окно браузера отрегулировать высоту каждой страницы. Сначала фоновое изображение было видно ниже нижнего колонтитула, которое выглядело довольно глупо. Все попытки фонового переполнения: скрытые; не работает при нанесении на тело или в таблицу стилей изображения. Это код сценария, который работал Сорта:Высота страницы Высота равного окна

` <script type="text/javascript"> 
var viewport = $(window).height(); 
$('.container-fluid').height(viewport); 
</script> 

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

body { 
margin-top: 0px; 
margin-bottom: 0px; 
background: none; 
background-overflow: hidden; 
} 

.full { 
background: url(http://test2.gandlconsultants.com/assets/img/big-pic-01.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-overflow: hidden; 
z-index: 999; 
} 

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

+0

Как выглядит ваш основной HTML-код? – Marcelo

+0

Вы имеете в виду, что размер окна зависит от высоты страницы? Давайте скажем, что ваша страница завершена на половину окна браузера, а затем окно браузера будет половинным размером? –

+0

ответ

1

Изменить

body { 
margin-top: 0px; 
margin-bottom: 0px; 
background: none; 
background-overflow: hidden; 
} 

в

body { 
margin-top: 0px; 
margin-bottom: 0px; 
background: none; 
height: 100vh; 
} 

и

.full { 
background: url(http://test2.gandlconsultants.com/assets/img/big-pic-01.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-overflow: hidden; 
z-index: 999; 
} 

к

.full { 
background: url(http://test2.gandlconsultants.com/assets/img/big-pic-01.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
height: 100vh; 
z-index: 999; 
} 

Примечание: background-overlfow: hidden недействителен css, может быть, вы имеете в виду background-origin: border-box;

+0

Спасибо Tambo. Однако ваше решение ничего не изменило. – user1887686

0

Вы не указали, какой элемент применил класс .full, чтобы показать фон в документе. Если это не на теге тела, я предлагаю добавить в класс CSS следующее:

position: relative; 
height:100%; 
+0

Спасибо за ответ Олуватумби, но это не решило проблему. – user1887686

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