Блог

Главная - Вопросы по программированию - ширина: calc( 100%-250 пикселей) не работает на весь экран

ширина: calc( 100%-250 пикселей) не работает на весь экран

#html #css #layout #width

Вопрос:

Я разделил макет на две области.

левая сторона: 250px

правая сторона: 100%-250px

но похоже, что правая сторона все еще на 100% в хроме. на нем указана его ширина 1440 пикселей. вы можете увидеть изображение здесь: введите описание изображения здесь.

Я хотел применить гибкое пространство между ними, но когда я это делаю, последняя часть исчезает с экрана, так как она составляет 1440 пикселей.

пожалуйста, помогите

Комментарии:

1. Вы добавили пробелы вокруг - следующим образом: 100% - 250px ?

2. Вы видите какие-либо ошибки в своем CSS при просмотре инструментов разработки? Например, правильно ли составлен ваш расчет (см. Комментарий @prettyinPink), плюс, похоже, вы не учитываете поля или отступы. Если вы покажете нам свой фактический CSS вместо его описания, мы, вероятно, сможем найти проблему.

Ответ №1:

Для этого вы можете использовать сетку

 .nav {
  height: 50px;
  width: 100%;
  display: grid;
  grid-template-columns: 250px 1fr;
}

.logo {
  background-color: red;
}

.bar {
  background-color: blue;
} 
 <div class="nav">
  <div class="logo"></div>
  <div class="bar"></div>
</div>

Ответ №2:

Пример с элементами с интервалом между ними и без него.

 nav {
  display: flex;
  justify-content: space-between;
}

div {
  height: 50px;
}

.left {
  width: 200px;
  background: #2797f3;
}

.right {
  width: calc(100% - 250px);
  background: #65b0b3;
}

.left.space {
  width: 250px;
}

.right.space {
  width: auto;
  flex: 1;
} 
 <nav>
  
  <div class="left"></div>
  <div class="right"></div>

</nav>
<br>
<nav>
  
  <div class="left space"></div>
  <div class="right space"></div>

</nav>
Метки: