Разделение страницы вертикально на две части

Владимир Н · February 28, 2012

Всем привет!

Устал уже гуглить...

Нужно вот что:

Разделить страницу на две части в процентах.

Колонки должны быть до самого низа окна, даже если контента меньше.

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

В каждом из блоков внутренние отступы со всех сторон в процентах.

Да, и чуть не забыл, работать должно в IE 6<, Opera 8.1<, Firefox 1.5<, Chrome и Safari.

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

P. S. Вот эту можно не предлагать. Там, если убрать шапку и подвал, получается почти, как надо, но не доходит до низа, если мало контента.

Gaspode · February 28, 2012

Таблица.

Владимир Н · February 28, 2012

Таблица.

:dash: Боже упаси!

Собственно, все уже практически сделано по указанной мною ссылке. Не хватает только 100% высоты.

Владимир Н · February 28, 2012

Сам нашел решение в инете.

Если кому интересно: http://jsfiddle.net/Novitsky/YpUTx/1/.

:yahoo:

Владимир Н · March 2, 2012

Вышеуказанный способ оказался непригодным под мои нужды.

Поэтому, я сам заморочился и сделал следующие.

Но, опять же, есть некоторые проблемы. Не отображается содержимое блока #content.

Причем только в IE9 и Firefox. Все остальные браузеры (Chrome, Opera, Safari и даже IE8) отображают нормально, как и задумано.

Появляется этот баг при добавлении display:table к body.

Может кто знает, как это исправить?

buddah · March 2, 2012

Владимир Н, уберите вообще display:table; В данном случае должно работать и так.

Владимир Н · March 2, 2012

Владимир Н, уберите вообще display:table; В данном случае должно работать и так.

К сожалению, это только на первый взгляд.

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

Switch74 · March 2, 2012

Я не спец по древним, возможно вам подойдет такой вариант, но конкретных целей я не знаю и сделан он лишь для показа идеи.

Фоны левого и правого блоков отделены от контентной части

Размеры левой и правой независимо влияют на общую высоту

Ширину пришлось сделать чуть меньше, т.к. в IE есть глюки работы с процентами

div#separate был введен, чтобы появились фоны, они почему-то не показывались без него в IE, если вы знаете почему отпишитесь и попробуем исправить как-нибудь более нормально.

Так же при появлении бегунка в IE появляется одностроковая белая полоса, тоже не разбирался из-за чего похоже на margin-collapse, но это не он.


<!DOCTYPE html>
<html>
<head>
	<style>
		*{margin:0px;padding:0px;}
		html,body{height:100%;min-height:100%;}
		#body{position:relative;min-height:100%;width:100%;background:#ddd;}
		#bg-left{position:absolute;top:0px;left:0px;bottom:0px;width:65%;z-index:1;background:#ddd;}
		#content-left{position:relative;margin:2%;width:60%;float:left;z-index:2;}
		#bg-right{position:absolute;top:0px;right:0px;bottom:0px;width:35%;z-index:1;background:#bbb;}
		#content-right{position:relative;margin:2%;width:30%;float:right;z-index:2;}
		#separate{position:relative;height:0px;width:0px;z-index:0;}
		#footer{position:relative;height:0px;clear:both;}
	</style>
</head>
<body>
	<div id="body">
		<div id="bg-left"></div>
		<div id="bg-right"></div>
		<div id="content-left">content-left
			<br><br><br><br><br><br><br><br>
		</div>
		<div id="content-right">content-right
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		</div>
		<div id="separate"></div>
		<div id="footer"></div>
	</div>
</body>
</html>

таблицами наверно было бы проще, но использование display:table; для сайта, который должен отображаться в ie6,7 это не в тему

Edited March 2, 2012 by Switch74

Владимир Н · March 2, 2012

Нет, нет. Никакого лишнего кода, пустых блоков для разметки и т. д. По такому принципу я и сам могу сделать.

Грубо говоря, не трогаем html, а думаем над css.

но использование display:table; для сайта, который должен отображаться в ie6,7 это не в тему

Да, забыл сказать. Про IE6-7 речь уже не идет. Только 8 и более поздние.

Switch74 · March 2, 2012

так что же тут париться то

блин, посмотрел ваш пример, думал от него плясать, но мне стало страшно...

зачем


html {
    margin:auto;
    max-width:80em;
    color:inherit;
    }

не ужели у html есть откуда брать цвет для текста, а max-width:80em; - это зачем, вам ведь нужен был сайт на 100%

это только сверху я начал

верстку я могу вашу использовать, а css можно менять я так понимаю?

Edited March 2, 2012 by Switch74

Владимир Н · March 2, 2012

так что же тут париться то

Ну так говорю же, в IE9 и Firefox не отображается содержимое левой колонки.

зачем
html {
    margin:auto;
    max-width:80em;
    color:inherit;
    }
не ужели у html есть откуда брать цвет для текста, а max-width:80em; - это зачем, вам ведь нужен был сайт на 100%
это только сверху я начал

Да, цвет надо было указать конкретный, например, #000. Но это только потому, что используется background-color. Валидатор ругается, если при указании цвета фона отсутствует объявление цвета текста. Ну, да это не важно.

Про max-width. 100% ширины должно быть только у фона колонок. Контент же имеет ограничение по ширине.

верстку я могу вашу использовать, а css можно менять я так понимаю?

Да, все правильно. Ну можно, максимум, добавить обертывающий div.

Т. е., должно быть так:

, а не так:

Edited March 2, 2012 by Владимир Н

Switch74 · March 2, 2012

попробуйте так, максимальную и минимальную ширину потом поставите сами

если будут проблемы в каких-то браузерах, то поподробнее пишите в каких и какие


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <title>Тест</title>
	<style>
		*{margin:0px;padding:0px;}
		html,body{height:100%;}
		#middle
		{
			display:table;
			width:100%;
			height:100%;
		}
		#content
		{
			display:table-cell;
			padding:2%;
			width:61%;
		}

		#sidebar
		{
			display:table-cell;
			padding:2%;
			width:31%;
			background:#ddd;
		}
	</style>
    </head>
    <body>
        <div id="middle">
            <section id="content">
                <h1>Content</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </section>
            <aside id="sidebar">
                <h2>Sidebar</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            </aside>
        </div>
    </body>
</html>

Владимир Н · March 2, 2012

максимальную и минимальную ширину потом поставите сами

Так я уже пробовал. Но здесь, как раз проблема в максимальной ширине контента. К чему я ее буду применять? Если к html или #middle, то, когда ширина окна будет больше ширины контента, появится белая полоса справа. А ее быть не должно (см. рисунки выше), серый фон должен тянуться до правого края при любых разрешениях экрана и размерах окна.

Грубо говоря, я сделал почти по вашему принципу, который вы предлагали в начале. Но вместо двух пустых блоков использовал контейнеры html и body.

Edited March 2, 2012 by Владимир Н

Switch74 · March 2, 2012

для этого ограничения могу предложить использовать такую конструкцию


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <title>Тест</title>
		<style>
		*{margin:0px;padding:0px;}
		html,body{height:100%;}
		#middle
		{
			display:table;
			width:100%;
			height:100%;
		}
		#content
		{
			display:table-cell;
			vertical-align:top;
			padding:2%;
			width:61%;
		}

		#sidebar
		{
			display:table-cell;
			vertical-align:top;
			padding:2%;
			width:31%;
			background:#ddd;
		}
		@media screen and (min-width: 1000px)
		{
			.max-content{float:right;width:700px;text-align:left;vertical-align:top;}
			.max-sidebar{float:left;width:300px;text-align:left;vertical-align:top;}
		}
		</style>
    </head>
    <body>
        <div id="middle">
            <section id="content">
				<div class="max-content">
					<h1>Content</h1>
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
				</div>
            </section>

            <aside id="sidebar">
				<div class="max-sidebar">
					<h2>Sidebar</h2>
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
				</div>
            </aside>
        </div>
    </body>
</html>

Edited March 2, 2012 by Switch74

Владимир Н · March 2, 2012

Непропорционально получается. Контент, как бы сдвигается немного вправо. Но надо будет достать бубен, идея не плохая. Может, что и получится.

Edited March 2, 2012 by Владимир Н

Switch74 · March 2, 2012

ну я там размеры не подгонял, это уже твоя забота, я только идею дал

Владимир Н · March 2, 2012

ну я там размеры не подгонял, это уже твоя забота, я только идею дал

Да, да. Я понял. Спасибо!

Попробую сейчас, может и выйдет что.

Владимир Н · March 2, 2012

Попробовал. Почти нереально просчитать размеры, когда в одном случае проценты, а в другом фиксированные величины.

Собственно, изначально, во второй части темы, меня интересовал вопрос, почему так происходит? Когда добавляешь display:table к body, пропадает контент левой колонки. И причем, только в двух браузерах (IE9 и Firefox). К тому же, в одном из них (IE), в более ранней версии (IE8) все нормально.

Может я и сам решение нашел бы, коли знал, в чем причина.

Но, в любом случае, Switch74, спасибо за беспокойство. Есть над чем подумать.

Владимир Н · March 3, 2012

Опять же, додумался сам. Правда методом тыка. :boast:

Рабочий пример.

Sign In

Разделение страницы вертикально на две части

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information