Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Растянуть блок на оставшееся пространство (https://javascript.ru/forum/xhtml-html-css/58577-rastyanut-blok-na-ostavsheesya-prostranstvo.html)

Siend 29.09.2015 16:33
Растянуть блок на оставшееся пространство
 
Ребят подскажите плиз, как реализовать:

Блоки справа от меня должны растягиваться на всю ширину после меню. Возможно ли это только средствами css?

EmperioAf 29.09.2015 19:55
Какую то сложную задачу вы хотите решить. Не проще ли определиться сколько N-блоков у вас будет и задать N+1-блоку другой класс ?
В рамках того, что вы хотите могу лишь предложить такое:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
  width: 300px;
  float: left;
border:1px solid green;
}
.Nblock {

}
.clearfix:after {
  content: "."; /* добавить содержимое: "." */
  display: block;  /* сделать блоком, т.к. inline не может иметь clear */
  clear: both;  /* с обеих сторон clear */
  visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
  height: 0;  /* сделать высоту 0, чтобы не занимал место */
}

</style>
</head>
<body>
<div class="clearfix">
<div class="menu">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

  <div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

рони 29.09.2015 20:29
Цитата:
Сообщение от EmperioAf
visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
зачем прятать то, что ненужно добавлять ?

EmperioAf 29.09.2015 20:34
Цитата:
Сообщение от рони (Сообщение 390235)
зачем прятать то, что ненужно добавлять ?
не знаю
у меня лежит этот код скопированный с learn.javascript.ru, и я никогда не читал его, потому что он работает

ksa 30.09.2015 08:36
EmperioAf, чего ты там накрутил? :D
Зачем все эти бубны?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
	width: 300px;
	float: left;
	border:1px solid green;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="menu">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

В твоем примере простое сочетание плавающего блока с другими блочными элементами... Их контент обязан обтекать плавающий блок.
Но сами блоки не обтекают.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
	width: 300px;
	float: left;
	border:1px solid green;
	margin-left: 10px;
}
.Nblock {
	border:1px solid red;
}
.clearfix:after {
  content: "."; /* добавить содержимое: "." */
  display: block;  /* сделать блоком, т.к. inline не может иметь clear */
  clear: both;  /* с обеих сторон clear */
  visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
  height: 0;  /* сделать высоту 0, чтобы не занимал место */
}
</style>
</head>
<body>
<div class="clearfix">
<div class="menu">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

ksa 30.09.2015 08:49
Siend, может вот с таким вариантом у тебя что-то получится замутить...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
	width: 300px;
	float: left;
	border:1px solid green;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.Nblock {
	display: inline;
	border:1px solid red;
}
</style>
</head>
<body>
<div class="clearfix">
	<div class="menu">
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
		</ul>
	</div>
	<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<br />
	<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<br />
	<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
</div>
</body>
</html>

EmperioAf 30.09.2015 09:05
Цитата:
Сообщение от ksa
EmperioAf, чего ты там накрутил?
Зачем все эти бубны?
разве в моей вёрстке есть лишние элементы? Просто я не догадался дать блокам
display: inline;

потому что в рамках моего мышления делать универсальный блочный элемент строчным - это абсурд. Надо сразу использовать span

ksa 30.09.2015 09:51
Цитата:
Сообщение от EmperioAf
разве в моей вёрстке есть лишние элементы?
Я убрал из твоего примера часть ЦСС и разницы не заметил. :) Именно эту часть и назвал "бубном"...

Siend 30.09.2015 10:04
Уважаемые, спасибо что оперативно отозвались. Поясню что да как)

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

Взяв один из последний вариантов и добавив в него блоки со 100% шириной получил вот такую вот штуку:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
    width: 300px;
    float: left;
    border:1px solid green;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.Nblock {
    display: inline;
    border:1px solid red;
}

.object{
width:100%;
height:30px;
background-color:green;
}
</style>
</head>
<body>
<div class="clearfix">
    <div class="menu">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>
    <div class="Nblock"><div class="object" ></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <br />
    <div class="Nblock"><div class="object" ></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <br />
    <div class="Nblock"><div class="object" ></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
</body>
</html>


Что определенно не отвечает моей задумке) Есть варианты решения такой задачки?)

mikhail.golovkin 30.09.2015 13:47
Можно реализовать путём создания разных контекстов c помощью float и overflow, например.

<iframe width="800" height="550" src="http://embed.plnkr.co/9RbRhrsnm85UabW7rW1G/preview" frameborder="0" allowfullscreen></iframe>


Ещё способы создать контекст: https://developer.mozilla.org/ru/doc...atting_context

К сожалению, в учебнике об этом ничего не сказано, а тема достаточно важная.

Siend 30.09.2015 14:14
ОТПАД!!!! Спасибо огромное! Правда я так и не понял суть этой хитрости. Каким образом overflow в одном месте и отсутствие онного в другом позволяет добиться этого эффекта? Можете пояснить?)

Siend 30.09.2015 14:16
overflow формирует новый контекст. Далее цитата:
Цитата:
Элементы из разных блочных контекстов форматирования никак не могут повлиять на положение друг друга на странице.
То есть по сути элементы не должны видеть друг друга, т.е. вести себя как при position:absolute;
В чем я ошибаюсь? (а я ошибаюсь, это очевидно)

Siend 30.09.2015 14:18
Ещё крайне интересно то, что блоки растягиваются на 100% хотя этого свойства мы не указывали, и ели его указать, то весь эффект исчезнет и блоки сместятся вниз.

mikhail.golovkin 30.09.2015 18:02
Цитата:
Сообщение от Siend (Сообщение 390303)
То есть по сути элементы не должны видеть друг друга, т.е. вести себя как при position:absolute;
В чем я ошибаюсь? (а я ошибаюсь, это очевидно)

Тут речь идёт об элементах внутри контекста, т.е. внутри каждого из блока с одим из свойств, создающих контекст.
Может быть, спецификация прояснит лучше.
http://www.w3.org/TR/CSS21/visuren.h...ock-formatting

Вольный перевод:

Цитата:
Сообщение от w3c spec
9.4.1 Блочные контексты форматирования.

Плавающие блоки, абсолютно позиционированные элементы, блочные контейнеры (такие, как inline-block, table-cells и table-captions) не являющиеся блочными элементами, и блочные элементы с 'overflow' отличным от 'visible' (за исключением случаев, когда значение наследуется от viewport) устанавливают новые блочные контексты для их содержимого.

В блочном контексте форматирования блоки располагаются вертикально один за другим от верха родительского блока. Вертикальное расстояние между двумя соседними блоками определяется свойствами 'margin'. Вертикальные отступы между соседними блоками объединяются.

В блочном контексте форматирования каждый левый край блока касается левого края родительского блока (для выравнивания справа налево касается правым). Это верно даже в присутствии плавающего блока (при этом строчные элементы могут обтекать плавающий блок), если только блок не устанавливает новый контекст (в этом случае сам блок может обтекать плавающий блок).

Что и подтверждается практикой. Блочный элемент занимает всю доступную ширину с учётом плавающих блоков.
Если установить ширину 100%, то блочный элемент физически не может обтекать и смещается ниже. Ведь он принимает ширину родителя и просто не помещается.

ksa 01.10.2015 08:23
mikhail.golovkin, столько теории... Тестовый пример от тебя будет? А то прям заинтриговал. :)

EmperioAf 01.10.2015 09:01
Цитата:
Сообщение от ksa (Сообщение 390428)
mikhail.golovkin, столько теории... Тестовый пример от тебя будет? А то прям заинтриговал. :)
так вот же был:

Цитата:
Сообщение от mikhail.golovkin (Сообщение 390295)
Можно реализовать путём создания 2х разных контекстов. float и overflow, например.

<iframe width="800" height="550" src="http://embed.plnkr.co/9RbRhrsnm85UabW7rW1G/preview" frameborder="0" allowfullscreen></iframe>


Ещё способы создать контекст: https://developer.mozilla.org/ru/doc...atting_context

К сожалению, в учебнике об этом ничего не сказано, а тема достаточно важная.
этот overflow:auto каким то магическим способом, но работает :)

ksa 01.10.2015 09:15
Теперь понял как та фигня работает. :D

ksa 01.10.2015 09:20
Цитата:
Сообщение от EmperioAf
этот overflow:auto каким то магическим способом, но работает
Второй раз меня удивляет этот overflow. :D
Сколько скрытого подтекста за сухими определениями его значений
Цитата:
hidden - Отображается только область внутри элемента, остальное будет скрыто.
auto - Полосы прокрутки добавляются только при необходимости.
http://htmlbook.ru/css/overflow

Siend 01.10.2015 09:58
mikhail.golovkin, а подскажите пожалуйста, в такой ситуации:

.block1{
overflow:auto;
}

.block2{
overflow:auto;
}

.block3{
overflow:auto;
}


Эти три блока будут обладать каждый собственным контекстом, или у всех он будет один? Т.е. разный контекст задать можно исключительно разными свойствами (например одному блоку float, а другому overflow) или даже одно свойство будет автоматически создавать новый контекст. Или перефразирую: Будет ли контекст блоков с одинаковыми свойствами объединяться?

P.S.: звучит наверное отвратительно, но по другому мысль сформулировать не смог(

ksa 01.10.2015 10:21
Цитата:
Сообщение от Siend
Эти три блока будут обладать каждый собственным контекстом, или у всех он будет один?
Разный у всех.
Ведь
Цитата:
Блочный контекст форматирования может быть создан посредством:
- корневого элемента или чего-то, что содержит его
- поплавками (элементы, у которых float не равно none)
- абсолютно позиционированными элементами (элементами, значение position которых либо absolute, либо fixed)
- inline-blocks (элементы с display: inline-block)
- ячейки таблицы (элементы с display: table-cell, установленного по умолчанию для ячеек таблицы)
- заголовки таблицы (элементы с display: table-caption, установленного по умолчанию для ячеек таблицы)
- элементы, у которых значение свойства overflow отличается от visible
- flex блоки(элементы с display: flex или inline-flex)
https://developer.mozilla.org/ru/doc...atting_context
Т.е. если ты у элемента указал хоть одно из 8-ми - значит создал "Блочный контекст"...

Элементы конечно могут быть и вложенными друг в друга... Но в каждом будет создан новый "Блочный контекст".

Siend 01.10.2015 10:34
Блин, точно, вот почему блоки с float:left будут вести себя похожим образом. Что-то сам не сообразил, спасибо большое)

ksa 01.10.2015 11:48
Вот еще интересная статейка на темы потоков и "плавания"...
http://habrahabr.ru/post/136622/

mikhail.golovkin 01.10.2015 17:34
ksa всё верно растолковал. Подредактировал свои сообщения, сбивающие с толку. Надеюсь, они теперь понятнее. :)


Часовой пояс GMT +3, время: 08:18.