1

Верстка должна быть простой блочной, без bootstrap, flex, grid, display-table. Левая колонка должна быть по высоте такая же, как и правая.

* {
    box-sizing: border-box;
  }
  .nav {
    float: left;
    width: 250px;
    background-color: #F0E68C;
  }
  .content {
    float: left;
    width: calc(100% - 250px);
    padding: 0 100px 0 50px;
    background-color: blue;
  }
<div class="container">
  <section class="nav">			
      <ul>
        <li><a href="#">конькобежный спорт</a></li>
        <li><a href="#">биатлон</a></li>
      </ul>
  </section>
  <section class="content">
    <h1>Футбол</h1>
      <p>Футбо́л (от англ. foot — ступня, ball — мяч) — командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее количество раз, чем команда соперника.</p>
      <p>Есть 17 официальных правил игры, каждое из которых содержит список оговорок и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины и люди с ограниченными физическими возможностями. Законы очень часто формулировались в общих чертах, которые позволяют упростить их применения в зависимости от характера игры.Правила игры публикуются в ФИФА, но поддерживаются Международным советом футбольных ассоциаций (IFAB)[31].</p>				
  </section>
</div>

3
  • Кроме того предоставленный код и так "без bootstrap, flex, grid, display-table", а что должно получиться, если не то что есть - неясно. 5 сен 2017 в 15:15
  • Левая колонка желтого цвета должна быть по высоте как и правый большой блок с текстом
    – PolonskiyP
    5 сен 2017 в 15:17
  • без bootstrap, flex, grid, display-table, да без проблем... возьми карандаш нарисуй на мониторе.....
    – Air
    5 сен 2017 в 16:47

2 ответа 2

3

Copy from SO en: https://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height

* {
    box-sizing: border-box;
  }
  .container {
    overflow: hidden;
  }
  .nav {
    float: left;
    width: 250px;
    background-color: #F0E68C;
  }
  .content {
    float: left;
    width: calc(100% - 250px);
    padding: 0 100px 0 50px;
    background-color: blue;
  }
  section.nav, section.content {
    margin-bottom: -500em;
    padding-bottom: 500em;
  }
  
<div class="container">
  <section class="nav">			
      <ul>
        <li><a href="#">конькобежный спорт</a></li>
        <li><a href="#">биатлон</a></li>
      </ul>
  </section>
  <section class="content">
    <h1>Футбол</h1>
      <p>Футбо́л (от англ. foot — ступня, ball — мяч) — командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее количество раз, чем команда соперника.</p>
      <p>Есть 17 официальных правил игры, каждое из которых содержит список оговорок и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины и люди с ограниченными физическими возможностями. Законы очень часто формулировались в общих чертах, которые позволяют упростить их применения в зависимости от характера игры.Правила игры публикуются в ФИФА, но поддерживаются Международным советом футбольных ассоциаций (IFAB)[31].</p>				
  </section>
</div>

2

Без флексов и таблиц остается только имитировать ...

* {
  box-sizing: border-box;
}
.nav {
  float: left;
  width: 250px;
  background-color: #F0E68C;
}
.content {
  float: left;
  width: calc(100% - 250px);
  padding: 0 100px 0 50px;
  background-color: blue;
}

/* Имитация равных колонок */

.container {
  background-color: #F0E68C;
}

.container:after {
  content: '';
  display: block;
  clear: both;
}
<div class="container">
  <section class="nav">			
      <ul>
        <li><a href="#">конькобежный спорт</a></li>
        <li><a href="#">биатлон</a></li>
      </ul>
  </section>
  <section class="content">
    <h1>Футбол</h1>
      <p>Футбо́л (от англ. foot — ступня, ball — мяч) — командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее количество раз, чем команда соперника.</p>
      <p>Есть 17 официальных правил игры, каждое из которых содержит список оговорок и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины и люди с ограниченными физическими возможностями. Законы очень часто формулировались в общих чертах, которые позволяют упростить их применения в зависимости от характера игры.Правила игры публикуются в ФИФА, но поддерживаются Международным советом футбольных ассоциаций (IFAB)[31].</p>				
  </section>
</div>

12
  • сколько не живу - всегда стоит сначала поискать по SO, а потом справшивать и отвечать. Можно, еще как можно и без таблиц)) 5 сен 2017 в 15:26
  • @Vyacheslav Potseluyko, вижу, пытаюсь понять есть ли у этого способа подвохи, всегда меня смущают фиксированные значения которые берутся непонятно откуда 5 сен 2017 в 15:26
  • это не фиксированное значение фиг знает откуда. Это просто какая-то очень большая константа, так, чтоб точно хватило на высоту второго блока. Не более) 5 сен 2017 в 15:28
  • 1
    для .content нужен background-color который будет перекрывать фон родителя, в вашей задаче он background-color: blue; в вашем примере его нет. В этом и заключается имитация и в этом главная проблема этого метода, если блок который перекрывает содержит мало контента (левая колонка выше чем правая), то имитация ломается, я бы в вашем случае лучше использовал способ предложенный товарищем @Vyacheslav Potseluyko 5 сен 2017 в 15:46
  • 1
    @PolonskiyP, его метод прост. обеим колонкам задается огромный padding снизу, после чего на этот же размер этот padding обрезается через отрицательный margin, все что вам надо, что бы работал его метода, это : .container { overflow: hidden; } .nav, .content { margin-bottom: -500em; padding-bottom: 500em; }. Вставьте это вместо того что вы вставили из моего варианта и все будет хорошо. 5 сен 2017 в 16:06

Ваш ответ

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

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