Я столкнулся с тем, что кажется проблемой рендеринга в webkit при использовании overflow: hidden; на дочернем div, а затем увеличивая высоту родительского div с помощью javascript. Я отбросил свою проблему до следующего образца кода.WebKit Rendering Проблема при использовании переполнения: скрыта;
Создайте страницу из этого источника, а затем выполните рендеринг в браузере WebKit (Safari, Chrome). Нажмите кнопку «Развернуть», и вы увидите, что divs, которые имеют overflow: hidden; и теперь должны отображаться на основе расширенной родительской высоты div, которые не отображаются. В браузерах Gecko (Firefox) и Trident (ID) это отлично работает.
Любые идеи или предложения по работе вокруг? В принципе, я хочу создать таблицу divs, содержащую текст в родительском div, и я не хочу, чтобы текст обертывался или расширялся за пределы div. Мне нужно настроить высоту родительского div на основе других вещей, происходящих на странице.
Спасибо! Барт
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
#test_container {
width: 540px;
}
.column_allow_overflow {
float: left;
width: 100px;
height: 16px;
margin-left: 4px;
padding: 3px;
}
.column_no_overflow {
float: left;
width: 100px;
height: 16px;
margin-left: 4px;
padding: 3px;
overflow: hidden;
}
.background {
background-color: #444444;
color: #e5e5e5;
}
.data_row {
height: 22px;
width: 100%;
padding-bottom: 22px;
background-color: #cccccc;
}
#expand_container {
overflow:scroll;
overflow-x: hidden;
-ms-overflow-x: hidden;
height: 100px;
width: 100%;
background-color: #cccccc;
}
</style>
</head>
<body>
<div id="test_container">
<div class="data_row background">
<button type="button" id="expand_button" onclick="expand();">Expand</button>
</div>
<div id="expand_container">
<div class="data_row background">
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
</div>
<div class="data_row background">
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
</div>
<div class="data_row background">
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
</div>
<div class="data_row background">
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
</div>
<div class="data_row background">
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
<div class="column_allow_overflow background">
Overflow allowed
</div>
<div class="column_no_overflow background">
Overflow NOT allowed
</div>
</div>
</div>
</div>
<script>
var expand = function (e) {
var button = document.getElementById('expand_button');
var expand_container = document.getElementById('expand_container');
button.onclick = contract;
expand_container.style.height = '160px';
button.innerHTML = "Contract";
};
var contract = function (e) {
var button = document.getElementById('expand_button');
var expand_container = document.getElementById('expand_container');
button.onclick = expand;
expand_container.style.height = '100px';
button.innerHTML = "Expand";
};
</script>
</body>
</html>
Вместо того, чтобы писать много кода. Используйте JQuery slideUp() и slideDown() или slideToggle() в вашем случае – zod
Я действительно использую YUI3 для моего реального приложения, но я хотел снять все это для этого примера ванили. Такая же проблема возникает при использовании YUI, поэтому я не думаю, что это имеет какое-либо отношение к той библиотеке JS, которую я использую или не использую. Если вы можете создать пример jquery, который работает, это было бы здорово! –
Что вы подразумеваете под «allow overflow»? –