Как заставить дочерние div всегда вписываться в родительский div?

Мой вопрос в том, есть ли способ, не использующий javascript, заставить дочерние divs распространяться на границы своего родителя, не превышая эти границы, когда вы не можете заранее знать размер родительского div?

Ниже приведен образец разметки/стилей, демонстрирующий мою проблему. Если вы загрузите его в браузер, вы увидите, что #two и #three оба выходят за пределы их родителя, #one и вызывают появление полос прокрутки.

Моя проблема не столько в полосах прокрутки, сколько в том, что я не знаю, как рассказать дочерние divs о том, что они занимают ширину или высоту, остающуюся для них, а не полную высоту или ширину родительского элемента.

<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
    <div id="one" class="border">
        <div id="two" class="border margin"></div>
        <div id="three" class="border margin"></div>
    </div>
</body>

Ответ 1

У меня была аналогичная проблема, но в моем случае у меня есть контент в моем div, который по высоте будет превосходить границы родительского div. Когда это произойдет, я хочу, чтобы он автоматически прокручивался. Я смог выполнить это, используя

.vscrolling_container { height: 100%; overflow: auto; }

Ответ 2

вы можете использовать display: inline-block;

надеюсь, что это полезно.

Ответ 3

В вашем примере вы не можете: 5px margin добавляется в ограничивающий прямоугольник div#two и div#three, эффективно делая их ширину и высоту 100% от родительского + 5px, что будет переполняться.

Вы можете использовать padding в родительском элементе, чтобы обеспечить там 5px пространства внутри его рамки:

<style>
    html, body {width:100%;height:100%;margin:0;padding:0;}
    .border {border:1px solid black;}
    #one {padding:5px;width:500px;height:300px;}
    #two {width:100%;height:50px;}
    #three {width:100px;height:100%;}
</style>

EDIT: при тестировании удаление width:100% из div#two фактически позволит ему работать правильно, поскольку div является блочным уровнем и всегда будет заполнять ширину своих родителей по умолчанию. Это должно очистить ваш первый случай, если вы хотите использовать маржу.

Ответ 4

Для ширины просто, просто удалите правило width: 100%. По умолчанию div будет растягиваться, чтобы соответствовать родительскому контейнеру.

Высота не такая простая. Вы могли бы сделать что-то вроде равный трюк столбца высоты.

html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}

Ответ 5

Для этого используются два метода:

Абсолютное позиционирование
Стили таблицы

Учитывая HTML, который вы предоставили здесь, это решение, использующее абсолютное позиционирование:

body #one {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}
body #two {
  width: auto;  
}
body #three {
  position: absolute;
  top: 60px;
  bottom: 0;
  height: auto;
}

<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
	<div id="one" class="border">
		<div id="two" class="border margin"></div>
		<div id="three" class="border margin"></div>
	</div>
</body

Ответ 6

Убедитесь, что внешний div имеет следующие свойства CSS:

.outer {
  /* ... */
  height: auto;
  overflow: hidden;
  /* ... */
}

Ответ 7

Для закрытия я считаю, что ответ на этот вопрос заключается в том, что решения нет. Единственный способ получить поведение, которое я хочу, - это javascript.

Ответ 8

вы можете использовать inherit

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}

Ответ 9

Если вы правильно поняли, самый простой способ - поплавать с детьми. Например:

#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }

Установка размера (высоты/ширины) и переполнения для автоматического или скрытого в родительском элементе заставляет его содержать любые всплывающие дочерние элементы.

Обратите внимание, что переполнение: скрыто; могут иногда вызывать проблемы с отключением содержимого, и в этом случае вы можете попробовать этот альтернативный метод:

http://www.positioniseverything.net/easyclearing.html

Ответ 10

Если вы хотите, чтобы дочерние divs соответствовали размеру родителя, вы должны поместить маркер по крайней мере в размере дочерних границ дочерних div (child.margin >= child.bordersize).

В этом примере просто удалите width: 100%; и height: 100% в #one и удалите ширина: 100% в #two. Это должно быть примерно так:

html, body {width:100%; height:100%; margin:0; padding:0;}    
.border {border:1px solid black;}   
.margin {margin:5px;}  
\#one {}   
\#two {height:50px;}    
\#three {width:100px; height:100%;}

Ответ 11

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