(высота 100%) плюс (2-колонка css)

Мне нужен интерфейс из двух столбцов, чтобы растянуть высоту страницы 100%.(высота 100%) плюс (2-колонка css)

PS: Если столбцы слишком длинны, появится полоса прокрутки. После того, как этот вопрос будет решен, я попытаюсь добавить липкий нижний колонтитул к интерфейсу.

PPS: пожалуйста, никаких решений с использованием «фальшивое» фонового изображения

Я действительно старался, чтобы найти ответ самого ... Спасибо, если у вас есть какие-либо идеи

вот код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"> 
<head> 
    <title>2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title> 

    <style media="screen" type="text/css"> 
/* <!-- */ 
*{ 
    margin:0; 
    padding:0; 
} 

    html { 
    background-color: #ccc; 
     height: 100%; 
    } 
    body { 
    background-color: white; 
    width: 600px; 
    margin: 0 auto; 
height:100%; 
    position: relative; 
    border-left: 1px solid #888; 
    border-right: 2px solid black; 
    } 

#footer { 
    clear:both; 
    width:100%; 
    height:0px;font-size:0px; 
} 


#container2 { 


    clear:left; 
    float:left; 
    width:600px; 
     overflow:hidden; 
    background:#ffa7a7; 
} 



#container1 { 

    float:left; 
    width:600px; 
    position:relative; 
    right:200px; 
    background:#fff689; 
} 
#col1 { 
    float:left; 
    width:400px; 
    position:relative; 
    left:200px; 
     overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:200px; 
    position:relative; 
    left:200px; 
     overflow:hidden; 
} 
/* --> */ 
    </style> 
</head> 
<body> 

<div id="container2"> 
    <div id="container1"> 
     <div id="col1"> 
      aaaa a a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a aa a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a aa a a a a aa aa a 
     </div> 
     <div id="col2"> 

      fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn v 
     </div> 
    </div> 
</div> 
<div id="footer"> 
    &nbsp; 
</div> 
</body>

источник

2010-05-19 user345161

в зависимости от браузеров, вы ориентируетесь, можно использовать самый простой метод: все CSS3 Columns

.columns { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
}

источник

2010-05-19 14:28:55 nickf

Спасибо. Но мне также нужны IE и Opera ... – user345161

Это не должно быть так сложно. Пожалуйста, взгляните на этот фрагмент кода.

<html> 
<head> 
<title>Columns</title> 
</head> 
<body> 
<style type="text/css"> 
.wrapper { 
    width:1200px; 
    margin:0 auto; 
} 
.col1 { 
    width:600px; 
    height:100%; 
    float:left; 
    background:#f00; 
} 
.col2 { 
    width:600px; 
    height:100%; 
    float:left; 
    background:#00f; 
} 
</style> 
<div class="wrapper"> 
    <div class="col1"> 
     Column 1 
    </div> 
    <div class="col2"> 
     Column 2 
    </div> 
</div> 
</body> 
</html>

.wrapper - это всего лишь центр двух столбцов.

источник

2010-05-19 15:51:58 Kevin

вы гений! этот код действительно работает в режиме qiuirks !!!! тем не менее, я могу сделать эту работу строгим/переходным доктрином. ну, отличный почтовый человек. Вы очень счастливый начинающий !!!!! – user345161

, чтобы пометить код, отступ каждой строки с 4 пробелами - есть панель справки справа от области редактирования. – nickf

Есть еще один хороший ответ, вы оба отличные – user345161

Вы попробовали наследовать высоту тела на своих контейнерах?

IE высота: inherit;

источник

2010-05-19 22:51:28 edl

******************************************** Отлично, это помогло меня для ! ******************************************** – user345161

(высота 100%) плюс (2-колонка css)

ответ

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