0

подскажите пожалуйста, не могу разобраться с проблемой. Есть страница, добавляю на неё три блока и прописываю им свойства в css:

.div_1 {
	position: absolute;
	background: #000;
	height: 66px;
	width: 100%;
	left: 0%;
	right: 0%;
	top: 0%;
	bottom: 0%;
	z-index: 2;
}
.div_2 {
	position: absolute;
	background: #29313C;
	height: 100%;
	width: 80px;
	left: 0%;
	right: 0%;
	top: 0%;
	bottom: 0%;
	z-index: 1;
}

.div_3 {
	position: absolute;
	background: #f2f2f2;
	height: 92.85%;
	width: 95.5%;
	left: 80px;
	right: 0%;
	top: 66px;
	bottom: 0%;
	z-index: 1;
}
<html>
	<head>
		<link href="test.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="div_1"></div>
		<div class="div_2"></div>
		<div class="div_3"></div>
	</body>
</html>

И получается так, что при сжатии окна браузера div_3 у меня выходит за размеры div_1. Подскажите в чём может быть проблема?

3
  • а вы код здесь пробовали выполнить? Что-то не очень понял что куда выходит 31 мая 2019 в 7:19
  • А у вас z-index должен быть именно таким? div_1 - 2 div_2 - 1 div_3 - 1 31 мая 2019 в 7:31
  • z-index я добавил только из за тени, чтобы тень верхнего блока заходила на нижний. В рабочем варианте должна быть верхняя панель, которая занимает всё пространство в ширину и уменьшается вместе с браузером, боковая, тоже самое но в длину, а третий блок чтобы заполнял всё, что осталось. Но при сжатии браузера третий блок выходит за пределы 31 мая 2019 в 7:50

1 ответ 1

0

Немного видоизменил css третего блока, думаю это то, что Вам нужно.

.div_1 {
  position: absolute;
  background: #000;
  height: 66px;
  width: 100%;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  z-index: 2;
}

.div_2 {
  position: absolute;
  background: #29313C;
  height: 100%;
  width: 80px;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  z-index: 1;
}

.div_3 {
  position: absolute;
  background: #f2f2f2;
  height: 100% - 66px;
  width: 100% - 80px;
  left: 80px;
  right: 0%;
  top: 66px;
  bottom: 0%;
  z-index: 1;
}
<div class="div_1"></div>
<div class="div_2"></div>
<div class="div_3"></div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.