Как сделать так, чтобы контент занимал 100% высоты и ширины - PullRequest
Новая
       0

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

0 голосов
/ 07 мая 2010

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

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

http://pastebin.com/x31mGtXr

Ответы [ 4 ]

5 голосов
/ 07 мая 2010

Как это ? 

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;
}
1 голос
/ 07 мая 2010

Удалите объявление с плавающей точкой в ​​div «content», и оно растянется до ширины родительского элемента, удалите поле в том же 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 "top" имеет разную ширину, то вы можете сгенерировать решение JavaScript, в котором вы устанавливаете высоту "content" на высоту "top" + (высота области просмотра - "top") при загрузке и при изменении размера браузера. Довольно просто сделать с таким фреймворком, как jQuery, не так уж и много без него.

0 голосов
/ 08 мая 2010

Вот как это закончилось для любого любопытного.Мне пришлось обмануть, используя некоторые 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>
0 голосов
/ 07 мая 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...