Как сделать контент занимающим 100% высоты и ширины

Я так близко, но я не могу заставить это работать, как я этого хочу. Я пытаюсь получить заголовок и меню, чтобы они всегда были видимыми, а контент занимал остальную часть экрана просмотра и имел свою собственную полосу прокрутки, когда она переполняется. Проблема в том, что ширина содержимого не растягивается вправо, и я получаю полосу прокрутки в середине моей страницы. Я также не могу заставить его взять оставшуюся часть оставшейся высоты окна, если я установил высоту на 100%, она хочет использовать всю высоту окна вместо того, что осталось.Как сделать контент занимающим 100% высоты и ширины

Я работаю только с IE7 или лучше, поэтому вам нужно беспокоиться о javascript и не прочь использовать jQuery, если он может решить эту проблему!

http://pastebin.com/x31mGtXr

источник

2010-05-07 Hiro2k

Так оно и было для всех, кто любопытен. Я должен был обмануть, используя некоторый jQuery, но он сделал трюк, и теперь он отлично выглядит, когда я изменяю его размер. :)

<style type="text/css"> 
     html, body { 
      height: 100%; 
      font-family: 'Calibri','Tahoma','Arial', sans-serif; 
      font-size: 14px; 
      overflow: hidden; 
     } 
     #top{ 
      width: 100%; 
     } 
     #container{ 
      width: 100%; 
      overflow: auto; 
     } 
     #menu { 
      float: left; 
      width: 12em; 
     } 
     #content {     
      overflow: auto; 
      border-left: black solid 1px; 
      padding: 0 0 0 .5em; 
     } 
</style> 

<script type="text/javascript"> 
     function rez(){ 
      $('#content').css('height', $(window).height()-$('#top').height()); 
      $('#content').css('min-height', $('#menu').height());     
      $('#container').css('height', $(window).height()-$('#top').height()); 
     }; 
     $(window).resize(function() { 
      rez(); 
     }); 
     $(window).load(function() { 
      rez(); 
     }); 
</script> 


<body> 
    <div id="top"> 
     <tiles:insert page='/WEB-INF/jsp/template/header.jsp'/> 
     <div id="top-space" style="border-bottom: gray solid 1em;"></div> 
    </div>   
    <div id="container">    
     <div id="menu"> 
      <tiles:insert page='/WEB-INF/jsp/template/menu.jsp'/> 
     </div> 
     <div id="content"> 
      <tiles:get name='content'/> 
     </div> 
    </div> 
</body>

источник

2010-05-07 22:14:00 Hiro2k

Как this?

html, body { 
    height: 100%; 
    font-family: 'Calibri','Tahoma','Arial', sans-serif; 
    font-size: 14px; 
    margin:0; 
    padding:0; 
} 
#container{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
#content { 
    min-height: 100%; 
    overflow: auto; 
    height:90%; 
    float: left; 
    margin-left:12em; 
    border-left: black solid 1px; 
    padding: 0 0 0 .5em; 
}

источник

2010-05-07 16:31:00

Закрыть, но я все равно получаю полосу прокрутки посредине браузера, когда содержимое переполняется. – Hiro2k

Если вы получаете горизонтальную полосу прокрутки, вы можете попытаться поместить некоторую 'width' на' # content'. Мне очень жаль, но на данный момент у меня нет IE7, чтобы проверить это, но также обратите внимание, что это не работает в Chrome (с 'width' на' # content', установленном в%, но он работает, если вы установите его в px или em.) –

Я получаю вертикальную полосу прокрутки посредине окна. Я могу установить ширину #content, но как узнать, сколько места необходимо заполнить для остальной части окна? – Hiro2k

Удалить декларацию поплавка на «содержание» DIV и он будет растягиваться, чтобы соответствовать родительской ширине, удалите запас на тот же DIV, потому что это ненужно и вызывает проблемы Chrome.

Re: высота вопроса ... является ли «верхний» div определенной высотой? Если да, то вы могли бы иметь установку вроде (хотя вроде загрязнены) следующего:

#container { 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 
#top { 
    height: 100px; // assumes top has a defined height 
    left: 0; 
    position: absolute; // lay it on top of the page 
    top: 0; 
    width: 100%; 
} 
#menu { 
    float: left; 
    margin-top: 100px; // push content down by value of top 
    width: 12em; 
} 
#content { 
    height: 100%; 
    overflow: auto; 
} 
#topSpacer { 
    height: 100px; // push content down by value of top 
}

Затем просто добавить распорку к содержанию также:

<div id="content"><div id="topSpacer"></div></div>

Если вы строги о вашей семантике, или «верхний» div имеет разную ширину, тогда вы можете создать решение для JavaScript, где вы устанавливаете высоту «содержимого» на высоту «top» + (высота видового экрана - «верх») при загрузке, а когда браузер изменен. Довольно тривиально делать с каркасом вроде jQuery, не так много без него.

источник

2010-05-07 18:11:38 Andrew

Это должно работать, я думаю. Это не делает разницы в FF, и он по-прежнему не работает в Chrome, но для IE он должен быть достаточным. –

Да, полоса прокрутки справа находится под браузером, ее сложно описать. Вот фото. http://img687.imageshack.us/img687/4526/22037006.png – Hiro2k

Как сказал Билли, удалите также маржу, которая исправит проблемы в Chrome. Также см. Обновленное сообщение о проблеме на скриншоте. – Andrew

снять левый край. Когда элемент с плавающей точкой содержит прокладку на той же стороне, что и при ее перемещении, IE удваивает маржу. Добавьте его к дополнению или еще лучше, к заполнению элемента, который он содержит. Например, P.

источник

2010-05-07 18:35:55 Billy

Я удалил поле и заменил его на 1мл. Я забыл упомянуть об этом. – Hiro2k

Просто так мы все поняли, это текущая версия документа, который у меня есть, и он демонстрирует действие en screen shot в Chrome, Firefox и IE7. http://pastebin.com/FiUC0zcC – Hiro2k

Как сделать контент занимающим 100% высоты и ширины

ответ

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