Как сделать CSS ROWS равной высотой? PURE CSS/HTML

Я искал промежутки, особенно StackOverflow, чтобы найти этот ответ, но я не смог. Хорошие люди здесь помогли мне решить «равную высоту столбца в строке» - это было здорово, для некоторых из моего содержания. Но, по-видимому, это совершенно другая игра.Как сделать CSS ROWS равной высотой? PURE CSS/HTML

У меня есть сайт, базовый макет CSS, верхняя панель с логотипом и навигацией, контейнер для изображений под ним, а затем содержимое нижнего колонтитула.

В «области содержимого» я создал два div-класса, oSection и eSection (нечетные и четные, я знаю). Я сделал это так, чтобы каждый div мог иметь чередующийся цвет фона, чтобы легко визуально разбить пакеты содержимого. Однако эти строки не имеют одинаковой высоты. Они, похоже, расширяются только до высоты того, что содержимое содержится в div. В идеале я бы хотел, чтобы каждый из этих divs имел ту же высоту, независимо от того, сколько контента находится в div (я думаю, он должен быть таким же высоким (такой же рост), как и наибольший div), но я также хочу сделать уверен, что они каждый на своей отдельной линии, так что мне действительно нужно: равные высоты divs, которые сложены друг на друга

Я пробовал использовать Flexbox с различными свойствами, но он не работал как I ожидал этого.

Вот CSS (надрез)

.oSection { 
    /*margin: 2% 0; */ 

    background-color: #E6E6E6; 
    height: 50%; 
    padding-left: .5%; 
    padding-top: .5%; 
    padding-bottom: .5%; 

    } 

    .eSection { 
    /* margin: 2% 0; */ 

    background-color: #FFFFFF; 
    height: 50%; 
    padding-left: .5%; 
    padding-top: .5%; 
    padding-bottom: .5%; 

    }

Вот HTML (чик)

<div class="oSection"> 
     <b>Web Design</b><br> 
     Yada yada yada 
     </div> 
     <div class="eSection"> 
     <b>Microsoft SharePoint</b><br> 
     Yada yada yada<br> 

     </div> 
     <div class="oSection"> 
     <b>Microsoft Dynamics CRM</b><br> 
     yad yada yada 
     </div> 
     <div class="eSection"> 
     <b>Technology Consulting</b><br> 
    yada yada yada 
     </div>

EDIT В соответствии с просьбой, вот скриншот, показывающий MIS-размера дивы. Я хочу, чтобы каждый из горизонтальных divs с текстом в них (а не верхний или нижний колонтитул, только средние div) был одинаковой высоты и продолжал складываться друг над другом, как сейчас.

Mis-Sized Divs

источник

2015-07-21 Brian Frick

вместо использования % использовать height: 480px или любую сумму, которую вы хотите?

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

источник

2015-07-21 19:17:05

Благодарим за быстрый ответ. Я не могу использовать px, поскольку я проектирую это, чтобы быть мобильным, а также - так что Проценты или VH/VW - мои лучшие варианты. Я отредактирую сообщение, чтобы показать вам, что у меня есть, но я не смогу показать вам то, что хочу, но вы должны быть в состоянии сказать довольно легко - вы увидите, что мое oSection и eSection разные высоты, когда я хочу, чтобы они были одинаковыми. Кроме того, его только на 50% в моем коде просто потому, что я пытался сделать преувеличенный пример. Вероятно, он будет ближе к 10-15% в его окончательной форме. –

затем используйте максимальную высоту и максимальную ширину для мобильных устройств, поэтому базовую настройку вы установите на 100%, но используйте максимальную ширину: 480 пикселей; установить ширину – Keith

Вы пробовали приложить все четыре из этих div в одном div, который имеет определенную высоту? возможно, относительно экрана? –

Я думаю, что вы после этого что-то вроде это.

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
.oSection, 
 
.eSection { 
 
    flex: 1; 
 
} 
 
.oSection { 
 
    background-color: #E6E6E6; 
 
} 
 
.eSection { 
 
    background-color: #FFFFFF; 
 
}

<div class="container"> 
 
    <div class="oSection"> <b>Web Design</b> 
 

 
    <br/>Yada yada yada</div> 
 
    <div class="eSection"> <b>Microsoft SharePoint</b> 
 
    <br/>Yada yada yada 
 
    <br/> 
 
    <br/> 
 
    <br/>Yada yada yada 
 
    <br/> 
 
    </div> 
 
    <div class="oSection"> <b>Microsoft Dynamics CRM</b> 
 

 
    <br/>yad yada yada</div> 
 
    <div class="eSection"> <b>Technology Consulting</b> 
 

 
    <br/>yada yada yada</div> 
 
</div>

источник

2015-07-21 19:39:42

это устанавливает каждый квадрат равномерно, но если у вас есть больше текста, чем вы его установили, каждый ящик не будет расширяться и покажет остальную часть текста. – Keith

Ну, он не может в пределах этой демонстрации, потому что нет места, если у вас есть более точная демоверсия, которую мы могли бы адаптировать. –

Благодарим вас @Paulie_D! Я дам этот выстрел и посмотрю, будет ли это работать для меня. Я думаю, это будет - и я просто уменьшу его для мобильных устройств. Как я уже сказал - я даже не могу его использовать, просто хотел знать, что это возможно, и посмотреть, как реализовать. Спасибо, что нашли время –

Flexbox не может достичь этого. Только CSS Grid может, поэтому ваша поддержка браузера несколько неглубока.

Главное, чтобы установить grid-auto-rows: 1fr в контейнер сетки CSS и определить его высоту.

Ручка: https://codepen.io/Hlsg/pen/XgjWMz

источник

2017-06-13 22:45:40 Hlsg

Как сделать CSS ROWS равной высотой? PURE CSS/HTML

ответ

Смежные вопросы