Как разместить содержимое на оставшейся высоте

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

var content = $(window).height() - $('.header').height() - $('.footer').height();

источник

2014-01-30 Edon Bajrami

Вы можете установить высоту для верхнего, нижнего колонтитула и содержимого в процентах. –

и 'overflow: hidden' на контент, который я думаю –

У меня исправлена высота заголовка и нижнего колонтитула, я не могу этого сделать. Есть ли другой способ сделать это :) –

Js:

function _responsive() 
{ 
    var content = $(window).height() - $('.header').height() - $('.footer').height(); 
    $('.content').css('height' , content); 
} 
$(window).resize(function() 
{ 
    _responsive(); 
}); 
_responsive();

HTML:

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div>

CSS:

.content { 
    overflow-x:hidden; overflow-y:auto; 
}

источник

2014-01-30 19:00:38

Просто интересно, почему у вас есть '_' перед именем функции? –

@ DanielLisik Мое соглашение, если вы завернете это в класс, это будет представлять собой частную функцию. –

Ницца, не знал этого. Благодаря! –

Если у вас есть фиксированный заголовок нижнего колонтитула, попробуйте что-то вроде этого. Я не уверен, если это какой-нибудь более практичным, чем просто с помощью JavaScript, но здесь идет

HTML ..

<body> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</body>

CSS ...

body { 
    overflow:hidden; 
} 
#header { 
    background-color:blue; 
    height:100px; 
    width:100%; 
    position:absolute; 
    top:0%; 
    z-index:1; 
} 
#content { 
    background-color:red; 
    height:100%; 
    position:relative; 
    z-index:0; 
} 
#footer { 
    background-color:green; 
    height:100px; 
    width:100%; 
    vertical-align:bottom; 
    position:relative; 
    top:-100px; 
    z-index:1; 
}

установлен в верхней части нижнего колонтитула к отрицательной высоте нижнего колонтитула.

источник

2014-01-30 19:02:30 user2224693

OP сказал, что он установил высоту на верхнем и нижнем колонтитулах. –

wherps my error – user2224693

У меня есть фиксированный верхний и нижний колонтитулы, я не могу использовать процент на этих двух :( –

EDIT: Так как вы зафиксировали высоту для верхнего и нижнего колонтитулов вы можете сделать это:

var _UI = function() { 
      var w = $(window).height(); 
      var h = 100; //height of your header 
      var f = 300; //height of your footer 
      $('#content-div').css({'height': (w - (h - f)) + 'px'}); 
     };

после создания этого FUNC, который будет хранить правильный размер высоты нужно просто вызвать его на window.resize и doc.ready

 $(window).resize(function() { 
      _UI(); 
     }); 

     $(document).ready(function() { 
      _UI(); 
     });

источник

2014-01-30 19:03:03 Patrick

'height: 100;' body? Не должно быть '100%'? –

да, я забыл процент. Haha, спасибо – Patrick

У меня есть фиксированный верхний и нижний колонтитулы, поэтому я не могу использовать процент на этом два :( –

Как разместить содержимое на оставшейся высоте

ответ

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