CSS DIV AUTO fill Высота и ширина (переполнение - полоса прокрутки)

Кто-нибудь может ПОМОЧЬ?CSS DIV AUTO fill Высота и ширина (переполнение - полоса прокрутки)

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

Мне нужен creat 4 DIV по CSS.
Заголовок заголовка 100px, и всегда в TOP.
Footer DIV является 100px, и всегда в НИЖНЕМ (также, если клиент браузера изменения размера, он всегда в Дно, никаких изменений макета)
Левый ДИВ является ширина 200px (высота: автоматическое заполнение)
MAIN ДИВ является заливка AUTO Высота и ширина (переполнение прокрутки)

Пожалуйста, помогите мне полный код HTML или CSS или Javascript. Потому что, я не очень хорошо для CSS ...

пожалуйста, увидеть эту картину: example

вот пример HTML, это нормально в FF, но не IE

<html> 
<body style="margin: 0; padding: 0;"> 
    <div style="position: absolute; background: #faa; height: 100px; top: 0px; width: 100%;"> 
     header 
    </div> 
    <div style="position: absolute; background: #afa; top: 100px; bottom: 100px; left: 0; 
     width: 100px;"> 
     left 
    </div> 
    <div style="position: absolute; background: #afa; top: 100px; bottom: 100px; right: 0; 
     width: 100px;"> 
     right 
    </div> 
    <div style="position: absolute; background: #faa; height: 100px; bottom: 0px; width: 100%;"> 
     footer 
    </div> 
    <div style="position: absolute; background: #aaf; bottom: 100px; left: 100px; top: 100px; 
     right: 100px; overflow: auto;"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
      <p>Aliquam tincidunt tempor 
      velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia.</p> 
      <p> Nulla ultrices aliquet 
      sem, vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus 
      purus pellentesque nec. Ut eu nibh ut arcu mattis luctus. </p> 
      <p>Cras at interdum quam. 
      Pellentesque imperdiet mi vitae felis sollicitudin iaculis. </p> 
      <p>Maecenas accumsan tortor 
      neque, at posuere felis. Quisque ultricies mi quis dolor pellentesque elementum.</p> 
    </div> 
</body> 
</html>

demo

источник

2013-04-08 user2257467

Покажите нам, что вы пробовали. Может быть, с JSFiddle –

Я не знаю, где разместить мой код. Я сохраняю его в этом файле .htm. это нормально на FF, но не на IE. http://nguyentaison.com/css_auto_fill.htm – user2257467

В чем проблема в IE, можете ли вы показать скриншот? –

Попробуйте http://jsfiddle.net/QXKtm/3/

HTML

<header></header> 
<div id="container"> 
    <section id="menu"></section> 
    <section id="content"></section> 
</div> 
<footer></footer>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

header, footer { 
    width: 100%; 
    height: 100px; 
    position: fixed; 
    background-color: red; 
} 

footer { 
    bottom: 0; 
} 

header { 
    top: 0; 
} 

#container { 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
    width: 100%; 
} 

#menu, #content { 
    height: 100%; 
    background-color: blue; 

} 

#menu { 
    width: 200px; 
    margin-left: 10px; 
    float: left; 
} 

#content { 
    margin: 0px 10px 0px 220px; 
    width: auto; 
}

источник

2013-04-08 14:17:07 plalx

Большое спасибо за быструю помощь. Я так сильно заболел этой проблемой. Я пробовал ваш код, но он HTML5? CSS 3? он не запускается на IE 8. Можете ли вы мне помочь Код для HTML4, а IE 6,7,8 ??? Спасибо так много снова (^_^) Ты очень хороший человек! Это время, я пытаюсь спросить на форуме, ты мой угол (^_^) – user2257467

CSS DIV AUTO fill Высота и ширина (переполнение - полоса прокрутки)

ответ

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