Как сделать так, чтобы высота: «100%» работала в разных браузерах в CSS? - PullRequest
Новая
       20

Как сделать так, чтобы высота: «100%» работала в разных браузерах в CSS?

0 голосов
/ 05 января 2010

У меня есть 2 столбца, которые достигаются плавающей. Они не растягиваются до 100% при использовании CSS. Как мне этого добиться?

Ответы [ 6 ]

1 голос
/ 05 января 2010

попробуйте установить минимальную высоту для этих столбцов и всех содержащих их элементов (включая body и html) на 100%. см. Здесь

РЕДАКТИРОВАТЬ: я слышал, что это не будет работать в ie8, но я проверил, и это выглядело нормально,

1 голос
/ 05 января 2010

Я провел некоторое исследование по этому вопросу, и нет никакого способа сделать это css интуитивно.Существуют такие способы, как обмануть эстетику, используя изображение за коротким столбцом для повторения вниз.

Другой способ - использовать javascript. Если я найду эти сообщения, я обновлю это.

http://www.thechoppr.com/blog/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar/

0 голосов
/ 05 января 2010

Попробуйте это css & html, протестировано и работает в FFx 3.5, IE 8 и Safari 4 - частично работает в IE7, применяя цвет фона для # контейнера. 

<style type="text/css" media="screen">
#container  { width:800px; margin:25px auto; position:relative;display:block;overflow: hidden;}
#header     { height: 80px;background: #eee; }
#wrapper    { float:left;width:100%}
#col2       { margin:0 200px;background: #ddd; }
#col1       { float:left; width:200px; margin-left:-800px; background: #eee; }
#col3       { float:left; width:200px; margin-left:-200px; background: #ccc; }    
#col1, #col2, #col3 { padding-bottom:32767px!important; margin-bottom:-32767px!important; }
#footer     { clear:both; background: #aaa; padding:10px;height: 20px;}
* > #footer { position:relative; z-index:20; }    
</style>

Использование этой структуры HTML 

<div id="container">
    <div id="header"></div>
    <div id="wrapper">
        <div id="col2"></div>
    </div>        
    <div id="col1"></div>        
    <div id="col3"></div>        
    <div id="footer"></div>    
</div>

С уважением Упомянутый

0 голосов
/ 05 января 2010

Чтобы достичь 100% высоты с помощью CSS, вы должны убедиться, что вмещающий блок также установлен на высоту: 100%; включая элемент <html>. 

html, body
{
    height: 100%;
}

#YourBlock
{
    height: 100%;
}
0 голосов
/ 05 января 2010

Это должно сработать: 


    <script language="Javascript" src="http://i.ngen-io.us/core/js/b4dom.js"></script>
    <script language="Javascript">
    var currHeight = document.body.clientHeight;
    document.getElementById("MyColumnDiv").style.height = ''.currHeight.'px';
    </script>

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

0 голосов
/ 05 января 2010 
#columns {
    height:100%;
}

Проблема css и height в том, что она не согласована между браузерами. Вам было бы лучше не беспокоиться о высоте. У вас также есть проблема с разными разрешениями экрана.

Если высота действительно важна, я бы решил ее с помощью JavaScript.

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

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

...