CSS: область содержимого должна занимать 100% высоты - PullRequest
Новая
       11

CSS: область содержимого должна занимать 100% высоты

2 голосов
/ 28 июля 2011

это сводит меня с ума ... Я создаю страницу на http://one29090testvdscom.accounts.combell.net/nl. Это страница с заголовком, левым меню, содержимым и нижним колонтитулом. Ширина зафиксирована на уровне 960 пикселей по центру по горизонтали. Это все работает. Но тогда, если в контенте мало текста, мне бы хотелось, чтобы серая область контента всегда брала доступную высоту экрана, чтобы нижний колонтитул находился внизу страницы.

Страница выглядит так: 

  <body>

    <!-- Centered container that contains site -->
    <div id="centeredcontainer">            
        <!-- Area with header -->
        <div id="header">                
            header here                              
        </div>            
        <!-- Area that contains main menu on the left and content on the right -->
        <div id="mainmenuandcontent">
            <!-- Main menu on the left -->
            <div id="mainmenu">
                main menu here                   
            </div>
            <!-- Content on the right -->   
            <div id="content">
                 body here
            </div>                
            <!-- Clears the floats so that next elements can use margins normally -->
            <div class="clearer"></div>
            <!-- Red line under content -->
            <div id="RedLineUnderContent"></div>
        </div>                         
        <!-- Area with languages -->
        <div id="languages">
          footer here           
        </div>                       
    </div>            
</body>

И соответствующий CSS: 

body
{
    font-size: 12px;
    font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif; 
    line-height:1.5em;      
    margin: 0; 
    padding: 0;   
    background-color: Black;
}

#centeredcontainer  
{
    width: 960px;    
    margin-left: auto ;
    margin-right: auto ;
}

#header
{
    margin-bottom: 20px; 
    margin-top:20px;  
}

#mainmenuandcontent
{  
    width: 960px;
    clear: both;       
    position: relative;    
}

#mainmenu
{        
    float: left;   
    width:180px; 
    padding:10px;
}

#content
{
    float: left;
    background-color: #403F3F;        
    width: 760px; 
    min-height: 400px;
    color:White;
}

#RedLineUnderContent
{
    height: 20px;
    background: #A10C10;
    margin-left: 200px; 
}

#languages
{        
    margin-top: 10px;   
    margin-left: 200px; 
    margin-bottom:20px;  
    text-transform:uppercase;  
}

.clearer
{
    clear:both;
}

Ответы [ 6 ]

5 голосов
/ 29 июля 2011

Я не знаю ни одного кроссбраузерного способа сделать это только в CSS.

Я только что сделал что-то похожее на эту прошлую ночь, используя JS, хотя: 

<head>
   ....
    <script type="text/javascript">
        function resize() {
            var frame = document.getElementById("main");
            var windowheight = window.innerHeight;
            document.body.style.height = windowheight + "px";
            frame.style.height = windowheight - 180 + "px";
        }
     </script> 
</head>
<body onload="resize()" onresize="resize()">
...

Это изменит размер элементас id "main", чтобы быть видимой высотой окна меньше 180px (180is это высота моего заголовка)

5 голосов
/ 28 июля 2011

Возможно, вы могли бы использовать CSS, подобный этой странице, что обеспечивает макет 100% высоты ?

2 голосов
/ 29 июля 2011

Я думаю, что нашел обходной путь, используя jquery. Я добавил следующий скрипт на главную страницу: 

    <script type="text/javascript">
        var contentHeight;
        $(document).ready(function () {
            contentHeight = $('#content').height();
            Resize();
            $(window).resize(function () {
                Resize();
            });
        });                    
        function Resize() {
            currentWindowHeight = $(document).height();                                
            if (contentHeight < currentWindowHeight - 160) {
                $('#content').css('height', (currentWindowHeight - 160) + "px");   
            }                               
        }
    </script>

Таким образом, после каждой загрузки страницы она получает высоту исходной высоты области содержимого. Затем он изменяет размер в соответствии с высотой окна, поэтому, когда высота содержимого меньше высоты окна, он изменяет размеры, чтобы взять высоту окна (минус высота верхнего и нижнего колонтитула). Если размер окна браузера изменяется, он делает то же самое (используя исходную высоту содержимого, а не текущую!).

Конечно, я бы предпочел CSS-решение, поэтому, если у кого-нибудь возникнет яркая идея, поделитесь им:)

1 голос
/ 03 сентября 2012

Вам не нужен JavaScript для этого. Пожалуйста, см. мой ответ на связанный вопрос: «Установите div на оставшуюся высоту, используя CSS с неизвестными div высоты выше и ниже» . Содержимое будет расширено, чтобы заполнить доступную область.

0 голосов
/ 29 июля 2011

Вы можете установить минимальную высоту контейнера на 100%, но вы также должны установить родительские контейнеры на минимальную высоту 100%, иначе это не будет работать. Для менее современных браузеров иногда требуется установить тело и даже тег html на высоту 100% (не min-height!).

0 голосов
/ 28 июля 2011

Установка высоты: 100% для контейнера?

Обновлено 2016: используйте единицы измерения, относящиеся к области просмотра, вместо процентов или пикселей, например, width: 100wv; height: 100wh;.Единица представляет собой процент от размера окна браузера, таким образом, игнорируя любые размеры родительского элемента.

...