Переменная длина средней колонки

Gleb2708 · May 18, 2016

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

Макет такой: хедер, футер, между ними три колонки:

Задача - сделать так, чтобы ширина средней колонки менялась в зависимости от ширины окна, но быть не менее, ну допустим, 550px. Такая возможность обеспечена на многих сервисах электронной почты, где в средней колонке находится таблица-список писем.

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

Я приведу покажу код, но я дополнительно прикрепил файлы с кодом.

Скрытый текст


<!DOCTYPE html>

<html>
<head>
	<title> test </title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <header id="header">
		Шапка сайта
	</header>
	<main id="main">
		<div class="left">
			Левая колонка: ширина постоянная
		</div>
		<div class="center">
			Центральная колонка: ширина должна меняться в зависимости от ширины окна,
				но не менее 550px.
		</div>
		<div class="right">
			Правая колонка: ширина постоянная
		</div>
	</main>
	<footer id="footer">
		Футер
	</footer>
</body>
</html>

CSS:

Скрытый текст


body{
    font-family: 'Calibri', sans-serif;
}

#header{
    position: relative;
    height:75px;
	background-color: #ff9999;
	min-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#main{
    position:relative;
    top: 0px;
    left: 0px;
    
    width:1000px;
    min-height: 700px;
    
    margin-left: auto;
    margin-right: auto;
}

#main .left, #main .center, #main .right{
	min-height: 500px;
}

#main .left{
    width: 250px;
	float: left;
	
	background-color: #ffff99;
}

#main .center{
	display: inline-block;
    min-width: 550px;
	background-color: #99ff99;
}

#main .right{
	display: inline-block;
    width: 200px;
	float: right;
	background-color: #99ffff;
}

#footer{
    position:relative;
    top:0;
        
    height:50px;
    min-width:1000px;
	
	min-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	
	background-color: #9966ff;
}

index.html

style.css

Edited May 18, 2016 by klierik
Поправил отображение кода. Устное предупреждение.

klierik · May 18, 2016

https://jsfiddle.net/klierik/yuhp4ycu/

klierik · May 18, 2016

Переместил тему в соответствующий раздел.

А в чем, собственно, вопрос?

В случае если ширина экрана будет меньше чем
ширина_левой_колонки + ширина_правой_колонки + 550px то в любом случае из потока что-то выпадет, потому как попросту нет места

PS: почитай в подписи как правильно оформлять тему

Gleb2708 · May 18, 2016

Вопрос: как сделать так, чтобы ширина средней колонки менялась в зависимости от ширины окна, но при этом всегда была не менее заданной минимальной длины (550px в данном примере). Повторю другие условия: ширина левой и правой колонок постоянные; при сужении окна менее 1000 px (суммарная ширина правой колонки, левой колонки и минимальной ширины средней) допускается неполная видимость всех трёх колонок.

Gleb2708 · May 18, 2016

Хорошо, благодарю Вас за ответ.

Я смог разобраться в SCSS, хотя никогда его не использовал.

Приведу код в HTML и CSS для новичков, перед кем встала аналогичная задача. Главное - чтобы сначала шли левая и правая колонки в HTML - коде, а только потом - средняя, иначе правая выпадет из потока.

Edited May 18, 2016 by Gleb2708
По требованию модератара перемещён код + добавлен комментарий

klierik · May 18, 2016

Пожалуйста, не надо сюда выкладывать код, для этого есть jsfiddle.

Sign In

Переменная длина средней колонки

Question

Gleb2708

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Gleb2708

Link to comment

Share on other sites

Gleb2708

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information