Stacking Divs с CSS

Я знаю, что это особенно сложно с CSS и текущим набором браузеров, но тем не менее у меня есть требование.Stacking Divs с CSS

Мне нужно иметь 3 divs в столбце. Каждый div должен иметь возможность занимать определенный процент вертикального пространства (например, 33%). Содержимое каждого div может быть в конечном итоге больше, чем доступное пространство, поэтому div должен иметь возможность переполнения и давать пользовательские полосы прокрутки.

Моя проблема заключается в том, что у меня возникли проблемы с выяснением того, как дать каждой панели вертикальную высоту. Есть идеи?

источник

2008-12-09 Joel Martinez

Не могли бы вы привести пример кода, который у вас уже есть? – 2008-12-09 17:01:13

Может быть, я что-то не хватает, но, учитывая:

<div id="column"> 
    <div id="a" class="cell">A</div> 
    <div id="b" class="cell">B</div> 
    <div id="c" class="cell">C</div> 
    </div>

Что случилось с:

#column 
    { 
     height: 100%; 
     width: 20%; 
    } 

    #column .cell 
    { 
     height: 31%; 
     margin: 1%; 
     background-color: green; 
     overflow: auto; 
    }

источник

2008-12-09 17:11:25 annakata

Следующая делает правильно на IE7, Firefox 3 и Google Chrome, теперь, когда я установил boneheaded ошибку в CSS:

<html> 
<head> 
<style type="text/css"> 
#one {height: 33%; overflow: auto;} 
#two {height: 33%; overflow: auto;} 
#three {height: 33%; overflow: auto;} 
</style> 
</head> 

<body> 

<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p> 

<p id="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p> 

<p id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p> 

</body> 

</html>

источник

2008-12-09 17:11:18

Я не буду напрямую ответить на ваш вопрос, но я надеюсь, что вы не снимите меня за это!

Наибольшие рамок я видел здесь, что делает серьезно хорошая укладка дивы является большим http://960.gs

Это позволяет установить фиксированные размеры для дивы и отскакивают дивы, которые не помещаются в макете ниже. Методы в css там, включая Meyer's Reset.css, превосходны.

Он гарантировал обучение для всех, даже если вы просто украли css и не использовали сетку.

источник

2009-04-03 18:17:01

нет нисходящего потока здесь, я действительно не знал о некоторых из этих фреймворков css, когда задавал этот вопрос. сэкономили бы много времени: -P – 2009-04-03 19:36:25

Stacking Divs с CSS

ответ

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