CSS - проблема с доступным заполнением - PullRequest
Новая
       4

CSS - проблема с доступным заполнением

0 голосов
/ 02 декабря 2018

У меня есть боковая панель слева, которая является фиксированной (ширина: 400 пикселей) и содержание справа, которое должно содержать оставшееся пространство.При использовании fill-available: ширина боковой панели меняется на 309 пикселей.

Почему fill-available не работает должным образом?Есть ли возможность установить контент в оставшееся место?

Пожалуйста, найдите кодовую ручку здесь: https://codepen.io/ullaakut/pen/eQxbvY

Спасибо!

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

fill-avaible - это то, что ведет себя по-разному в разных браузерах, но если вы добавите width: 100%, прежде чем его можно будет использовать из того браузера, который его не поддерживает. 

body {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 400px;
  height: 100%;
}

#content {
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}

/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */

body {
  color: white;
  font-size: 14pt;
  margin: 0;
}

#sidebar {
  padding: 20px;
  background: #3c3c3c;
}

#content {
  padding: 20px;
  background: grey;
}
<body>
  <div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
  <div id="content">This should fill the available space and not take space over the sidebar</div>
</body>
0 голосов
/ 02 декабря 2018

Как здесь

доступно для заполнения ???.Одна из великих тайн жизни

Вы можете использовать calc (400px ширины боковой панели + padding = 480px) 

body {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 400px;
  height: 100%;
}

#content {
   width: calc(100% - 480px);
}

/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */

body {
  color: white;
  font-size: 14pt;
  margin: 0;
}

#sidebar {
  padding: 20px;
  background: #3c3c3c;
}

#content {
  padding: 20px;
  background: grey;
}
<body>
  <div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
  <div id="content">This should fill the available space and not take space over the sidebar</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...