Мои ящики выходят за пределы страницы, когда я использую потоковые ящики даже с установленной максимальной высотой - PullRequest
Новая
       5

Мои ящики выходят за пределы страницы, когда я использую потоковые ящики даже с установленной максимальной высотой

0 голосов
/ 05 сентября 2018

У меня есть это в настоящее время 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Madokami</title>
        <link rel="stylesheet" href="css/CSS">
    </head>
    <body>
        <div class="container">
            <div class="box color1">Box One</div>
            <div class="box color2">Box Two</div>
            <div class="box color3">Box Three</div>
            <div class="box color4">Box Four</div>
            <div class="box color5">Box Five</div>
        </div>
    </body>
</html>

Я сделал этот код https://jsfiddle.net/qu02ch4z/1/ и использовал его для создания боковой панели, которую я могу использовать на своем сайте с помощью flex вместо простого создания отдельных блоков. Проблема в том, что когда я использую флексбоксы, он уходит с сайта и не хочет работать

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Я не уверен, правильно ли я вас понимаю. Но если вы хотите растянуть все блоки по высоте окна просмотра и не превышать этого, вы можете установить высоту контейнера на 100vh, удалить фиксированные line-height из блоков и добавить к ним flex: 1. 

body {
  margin: 0;
  font-family: verdena, sans-serif;
  background: #262626;
}

.container {
  /* 100 % of the viewport height */
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.box {
  /* stretch boxes to fill 100% of the height */
  flex: 1;
  
  /* center text */
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 15%;
  padding: 0.5em;
  transition: .5s;
}

.box:hover {
  width: 30%
}

.color1 { background: #f00; }
.color2 { background: #A16340; }
.color3 { background: #A6A340; }
.color4 { background: #A12224; }
.color5 { background: #f66340; }
<div class="container">
  <div class="box color1">Box One</div>
  <div class="box color2">Box Two</div>
  <div class="box color3">Box Three</div>
  <div class="box color4">Box Four</div>
  <div class="box color5">Box Five</div>
</div>

РЕДАКТИРОВАТЬ: Если вы хотите, чтобы ящики сохраняли свой первоначальный размер и только сжимались, если их много, вы можете использовать flex-grow: 0; flex-shrink: 1; flex-basis: 20px;, где flex-basis определяет размер по умолчанию. Вот интерактивный пример: 

const heightSlider = document.getElementById('height-slider');
const heightSliderValue = document.getElementById('height-slider-value');
const container = document.getElementById('container');

heightSlider.addEventListener('input', changeContainerHeight);

function changeContainerHeight(e = null) {
  const factor = e ? parseInt(e.target.value) / 100 : 0.8;
  const newHeight = Math.round(110 * factor);
  container.style.height = `${newHeight}px`;

  heightSliderValue.innerText = newHeight;
}

changeContainerHeight();


const flexBasisSlider = document.getElementById('flex-basis-slider');
const flexBasisSliderValue = document.getElementById('flex-basis-slider-value');
const boxes = document.querySelectorAll('.box');

flexBasisSlider.addEventListener('input', changeFlexBasis);

function changeFlexBasis(e = null) {
  const factor = e ? parseInt(e.target.value) / 100 : 0.5;
  const newFlexBasis = Math.round(16 * factor)
  boxes.forEach(box => {
    box.style.flexBasis = `${newFlexBasis}px`;
  })
  flexBasisSliderValue.innerText = newFlexBasis;
}

changeFlexBasis();
body {
  font-family: sans-serif;
}

.form {
  display: flex;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 300px;
  min-width: 150px;
  text-align: center;
  margin: 1rem auto;
}

.container {
  height: 100px;
  background-color: burlywood;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 8px;
  font-size: 0.5rem;
  width: 50%;
  color: #fff;
  background-color: cornflowerblue;
  border-bottom: 2px solid #fff;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="form">
  <div class="form-group">
    <label for="height-slider">Container Height: <span id="height-slider-value">88</span>px</label>
    <input type="range" id="height-slider" step="1" value="80">
  </div>
  <div class="form-group">
    <label for="flex-basis-slider">Box Flex Basis: <span id="flex-basis-slider-value">8</span>px</label>
    <input type="range" id="flex-basis-slider" step="1" value="50">
  </div>
</div>
<div class="container" id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
0 голосов
/ 05 сентября 2018

Я не совсем уверен в проблеме, но я видел, что Box Three перекрывалось Box Four. Это сделано из-за того, что ширина установлена ​​на 10%, а текст не умещается.

Назначение другого font-size сработало для меня. Например. Я использовал view window размер: VW .

В вашем .box -классе измените ниже:

font-size: 1.2em; до font-size: 2vw;.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...