Как я могу предотвратить наложение DIV с помощью CSS на изменение размера экрана?

Question

DIV перекрываются, когда я изменяю размер страницы до меньшего размера.Я попытался выполнить поиск, но не смог найти подходящего решения.

    <div class="column left">

      </div>

      <div class="column Middle">

      </div>

      <div class="column right">

      </div>


.column {
    float: left;
    padding: 5px;
    height: 100%;
    position: relative;

   /*  height:  */
}

.left {
  width: 16%;  
}

.right {
  width: 20%;  
}

.middle {
  position: relative;   
  height: 100%;
  width: 60%;

}

.row h2 {

    color: #800000; 
}


.row:after {

    display: table;
    clear: both;
    height: 100%;
}

@media screen and (max-width: 500px) {
.column {
    padding: 5px;
    height: 100%;
    width: 100%;
    position: relative;
    display: block;
    overflow: visible;
    float: left;

}

DIV не перекрываются, когда я использую overflow: auto в CSS.Переполнение авто приносит полосу прокрутки, которая мне не нравится.

Можете ли вы посоветовать наилучшее решение?

Answer 1

Я реплицировал ваш код, и столбцы перекрываются, когда он достигает точки останова 500 пикселей.Мне пришлось изменить ваш средний класс в HTML, так как он был написан заглавными буквами и не получал стили CSS.Я не уверен, решит ли это вашу проблему?

     <div class="column left">
     </div>
     <div class="column middle">
     </div>
     <div class="column right">
     </div>

.column {
    float: left;
    padding: 5px;
    height: 100%;
    min-height: 300px;
    position: relative;

   /*  height:  */
  }

  .left {
    width: 16%; 
    background: blue;
  }

  .right {
    width: 20%; 
    background: red;
  }

  .middle {
    position: relative;   
    height: 100%;
    width: 60%;
    background: black;
  }

  .row h2 {

      color: #800000; 
  }


  .row:after {

      display: table;
      clear: both;
      height: 100%;
  }

  @media screen and (max-width: 500px) {
  .column {
      padding: 5px;
      height: 100%;
      width: 100%;
      position: relative;
      display: block;
      overflow: visible;
      float: left;

  }

https://codepen.io/Angel-SG/pen/dwMvxN

Answer 2

Кажется, что отступы: 5px вызывают это.Когда я изменяю ширину на 100% - 10px (отступы 5px с обеих сторон), свиток исчезает.

@media screen and (max-width: 500px) {
  body { margin: 0;}
  .column {
    padding: 5px;
    height: 100%;
    width: calc(100% - 10px);
    position: relative;
    display: block;
    overflow: visible;
    float: left;
  }
}

Надеюсь, это поможет.