Как сделать плавающие внутренние отделения той же высотой как самое высокое отделение
Используйте .is(":visible"), как показано ниже.
Нажмите здесь, чтобы узнать больше
window.setInterval(() => {
$(".myDiv").toggle();
}, 1000);
window.setInterval(() => {
if ($(".myDiv").is(":visible")) {
$(".text").html("Visible");
}
else {
$(".text").html("Hidden");
}
}, 1000);.myDiv {
width: 100px;
height: 100px;
background-color: red;
}
Visible
3 ответа
Если вы не против jQuery, вы можете использовать EqualHeight , он должен делать то, что вы хотите
Было решение, которое я видел в A List Apart (я думаю), где вы даете двум внутренним столбцам огромное нижнее заполнение, но такое же огромное значение, как отрицательное поле. Все это работает до тех пор, пока высота столбца не превышает 32000 пикселей, что бывает редко. Что-то вроде:
.col {
float: left;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
... где «col» - это имя класса для любого столбца. Затем вы можете стилизовать отдельные столбцы, как вам нравится, с помощью отдельного класса.
<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>
Другой вариант - использовать фоновое изображение во внешнем блоке div, включая границы и т. Д. Такой подход, очевидно, означает, что изменить столбцы (ширину , цвета) после настройки.
You have three options.
- Make the inner divs both as high as the outer div. This isn't too hard;
- Put the inner divs inside another div and try and use height and/or min-height 100% to make them as high as the containing div although I suspect this won't work as the containing div will probably stretch to the height of its containing div or the page. It might be worth a shot though; or, easiest of all
- Use tables. This problem is trivial with tables. It's a good example of pure CSS deficiencies.
There is no simple way to two divs "share" height. Tricks like 100% height have cross-browser issues both in terms of the CSS attributes you need to use and with borders, which you are using. Borders are typically in addition to any height that you use.
Some might say use display: table-cell but support for that is rather limited (on IE).