Укладка Div с помощью CSS

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

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

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

Не могли бы вы опубликовать пример кода, который у вас уже есть?

— 09.12.2008 20:01

html css

09.12.2008 19:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 601

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Следующее отображается правильно в IE7, Firefox 3 и Google Chrome, теперь, когда я исправил тупую ошибку в 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>

09.12.2008 20:11

Ответ принят как подходящий

Может я чего-то упускаю, но учитывая:

  <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;
    }

09.12.2008 20:11

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

Самый лучший фреймворк, который я видел здесь, который делает действительно хорошее стекирование div, - это отличный http://960.gs

Он позволяет вам устанавливать фиксированные размеры для div и bounces div, которые не помещаются в ваш макет ниже. Техники в css там, в том числе Meyer Reset.css, превосходны.

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

здесь нет голосов против, я на самом деле не знал о некоторых из этих CSS-фреймворков, когда задавал этот вопрос. сэкономили бы много времени :-P

— 03.04.2009 23:36

03.04.2009 22:17