Я не могу найти способ иметь одну таблицу с 4 строками с одинаковой высотой (без использования табличного тега). Эта таблица включена в div, которая имеет дисплей table-cell.Дисплей таблицы проблем HTML/CSS
Я создал этот jsbin: https://jsbin.com/jejupogodi/edit?html,output
Я хочу, чтобы розовая часть взять всю доступную высоту и каждую строку внутри она должна иметь 25% от высоты (независимо от длины содержимого есть).
Я немного прибрал ваш код. Я использовал vh (вертикальная высота) вместо процента. Вы можете запустить фрагмент кода, но вот fiddle
.container {
display: table;
width: 100%;
height: 100vh;
background: lightgreen;
}
.focus {
height: 500px;
}
.sliderContainer {
display: table-cell;
width: 40%;
height: 100%;
vertical-align: top;
background-color: white;
}
.slider {
margin: 0px;
padding: 0px;
list-style-type: none;
display: table;
height: 100%;
width: 100%;
}
.slider li {
display: table-row;
cursor: pointer;
height: 25vh;
background-color: pink;
overflow: hidden;
}
li .sliderImg{min-height:5vh; max-height:5vh;}
.sliderDetails {
border-bottom: 1px solid black;
padding-bottom: 5px;
min-height: 20vh;
max-height:20vh;
overflow-y: scroll;
overflow-x: hidden;
}<body>
<div class="container">
<div class="focus">
<div>
<div class="focusDetails">
<div class="focusTitle"></div>
<div class="focusDesc"></div>
</div>
<div class="previous" style="display:none;"><span></span>
</div>
<div class="next"><span></span>
</div>
</div>
</div>
<div class="sliderContainer">
<ul class="slider">
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Town Hall Meeting Presentation - Sunstar Italiana</p>
<p class="sliderDesc">On Tuesday, June 30 all Sunstar Italiana employees took part to the Town Hall Meeting presentation made by the General Manager, Marco Bruscaini. Through his</p>
</div>
</li>
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Top Management Visits the HQ in Etoy</p>
<p class="sliderDesc">The welcome to the Sunstar Headquarter June Meetings' attendees from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one The welcome to the Sunstar Headquarter June Meetings' attendees
from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one</p>
</div>
</li>
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Distributor meeting</p>
<p class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</p>
</div>
</li>
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Distributor meeting</p>
<p class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</p>
</div>
</li>
</ul>
</div>
</div>
</body>wow спасибо! Я никогда не использовал это vh .... даже не знал, что он существует: -D. Просто что-то узнал. – PlaTyPuS
@PlaTyPuS вы должны положить 100vh в свой контейнер, чтобы сделать это даже по-другому http://jsfiddle.net/eznkmasa/1/ Всегда хорошо учиться! –
, но даже с 100vh в контейнере LI не имеют одинаковой высоты. Если я ставлю 20vh (вместо 25vh), то, похоже, он работает лучше, но я не понимаю, почему. – PlaTyPuS
решаемые Flexbox. https://jsbin.com/yutucapuze/1/edit?output
/* **************
Quick Reset
************** */
html {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* **********
Style
********** */
.Rows {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-box-lines: single;
-moz-box-lines: single;
-o-box-lines: single;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.Row {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
margin: 0;
height: 500px;
}
.Slider {
background-color: #333;
position: relative;
}
.Slider:after {
content: '50% width & 500px heigth';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 2rem;
color: #3da7b4;
}
.List {
border: 1px solid #000;
}
.Item {
display: block;
min-height: 25%;
height: 25%;
max-height: 25%;
border: 1px solid #000;
position: relative;
overflow: auto;
background-color: #555;
}
.Item:after {
content: '25% heigth';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 1rem;
color: #3da7b4;
}
.Item__content {
padding: 0;
margin: 0;
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}<div class="Rows">
<div class="Row Slider"></div>
<div class="Row List">
<div class="Item">
<p class="Item__content">Lorem ipsum dolor</p>
</div>
<div class="Item">
<p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias</p>
</div>
<div class="Item">
<p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias saepe hic rerum. Aut omnis voluptatum placeat, amet aliquam, alias voluptatibus fugiat beatae quibusdam?</p>
</div>
<div class="Item">
<p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias saepe</p>
</div>
</div>
</div>Привет, THX для вашего ответа. Я также думал о том, чтобы делать это с помощью flexbox. Но поскольку мне действительно нужна совместимость с IE9 ... я не могу ее использовать. http://caniuse.com/#feat=flexbox – PlaTyPuS
Не могли бы вы изменить название будет немного более описательный, а также разработать ваш вопрос немного больше? – Gemtastic
http://callmenick.com/post/css-equal-height-columns-three-different-ways – DonSinDRom
Ваш код немного грязный и трудно следовать. Для вашей собственной выгоды вы можете захотеть очистить его для дальнейшего обслуживания. –