您现在的位置是:首页 > 正文

html如何设置div的高度与窗口相同,HTML / CSS:使两个浮动div具有相同的高度

2024-02-29 16:29:24阅读 0

您可以通过应用大量的底部填充,相同数量的底部负边距以及使用隐藏溢出的div围绕列来获得CSS中的相等高度列。垂直居中文本有点棘手,但这应该可以帮助你。

#container {

overflow: hidden;

width: 100%;

}

#left-col {

float: left;

width: 50%;

background-color: orange;

padding-bottom: 500em;

margin-bottom: -500em;

}

#right-col {

float: left;

width: 50%;

margin-right: -1px; /* Thank you IE */

border-left: 1px solid black;

background-color: red;

padding-bottom: 500em;

margin-bottom: -500em;

}

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Test content

longer

Test content

这是2012年+ n,所以如果你不再关心IE6 / 7,display:table,display:table-row和display:table-cell适用于所有现代浏览器:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

更新2016-06-17:如果您认为时间已经到了display:flex,请查看Flexbox Froggy。

您应该使用flexbox来实现此目的。它在IE8和IE9中不受支持,并且只在IE10中使用-ms前缀,但所有其他浏览器都支持它。对于供应商前缀,您还应该使用autoprefixer。

.parent {

display: flex;

flex-wrap: wrap; // allow wrapping items

}

.child {

flex-grow: 1;

flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.

}

你可以使用js:

$(document).ready(function() {

var height = Math.max($("#left").height(), $("#right").height());

$("#left").height(height);

$("#right").height(height);

});

这是CSS中的经典问题。对此没有真正的解决方案。

A List Apart的这篇文章很好地解读了这个问题。它使用一种称为“人造柱”的技术,基于在元素上有一个垂直平铺的背景图像,其中包含创建等长列幻觉的列。因为它位于浮动元素的包装上,所以它与最长的元素一样长。

A List Apart编辑在文章中有这样的说明:

编者的一份说明:尽管时间很好,但本文可能并不反映现代最佳实践。

该技术需要完全静态宽度设计,这种设计不适用于当今流行的跨设备站点的液体布局和响应式设计技术。但是,对于静态宽度站点,它是一个可靠的选择。

我有类似的问题,在我看来最好的选择是只使用一点点的javascript或jquery。

您可以通过获取最高div值并将该值应用于所有其他div来使想要的div达到相同的高度。如果你有很多div和许多解决方案,我建议写一些预先的js代码来找出所有div中哪一个最高,然后使用它的值。

使用jquery和2 divs非常简单,这里是示例代码:

$('.smaller-div').css('height',$('.higher-div').css('height'));

最后,还有最后一件事。

他们的填充(顶部和底部)必须相同!如果填充量较大,则需要消除填充差异。

据我所知,你不能使用当前的CSS实现。要制作两个相同高度的列,你需要JS。

这适用于IE 7,FF 3.5,Chrome 3b,Safari 4(Windows)。

如果您取消注释底部更清晰的div,也可以在IE 6中使用。

编辑:正如Natalie Downe所说,你可以简单地将width: 100%;添加到#container。

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

#container {

overflow: hidden;

border: 1px solid black;

background-color: red;

}

#left-col {

float: left;

width: 50%;

background-color: white;

}

#right-col {

float: left;

width: 50%;

margin-right: -1px; /* Thank you IE */

}

Test content

longer

Test content

如果div不是固定高度,我不知道如何在右侧div中垂直居中文本的CSS方式。如果是,您可以将line-height设置为与div高度相同的值,并将包含文本的内部div设置为display: inline; line-height: 110%。

使用Javascript,您可以使两个div标签具有相同的高度。较小的div将使用下面显示的代码调整为与最高div标签相同的高度:

var rightHeight = document.getElementById('right').clientHeight;

var leftHeight = document.getElementById('left').clientHeight;

if (leftHeight > rightHeight) {

document.getElementById('right').style.height=leftHeight+'px';

} else {

document.getElementById('left').style.height=rightHeight+'px';

}

“left”和“right”是div标签的id。

div {

border: 1px solid #000;

margin: 5px;

padding: 4px;

display:table-cell;

width:25%;position:relative;

}

body{display:table;

border-collapse:separate;

border-spacing:5px 5px}

This is my div one This is my div one This is my div one

This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two

This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3

使用JS,在所有想要具有相同高度的元素中使用data-same-height="group_name"。

这个例子:

https://jsfiddle.net/eoom2b82/

代码:

$(document).ready(function() {

var equalize = function () {

var disableOnMaxWidth = 0; // 767 for bootstrap

var grouped = {};

var elements = $('*[data-same-height]');

elements.each(function () {

var el = $(this);

var id = el.attr('data-same-height');

if (!grouped[id]) {

grouped[id] = [];

}

grouped[id].push(el);

});

$.each(grouped, function (key) {

var elements = $('*[data-same-height="' + key + '"]');

elements.css('height', '');

var winWidth = $(window).width();

if (winWidth <= disableOnMaxWidth) {

return;

}

var maxHeight = 0;

elements.each(function () {

var eleq = $(this);

maxHeight = Math.max(eleq.height(), maxHeight);

});

elements.css('height', maxHeight + "px");

});

};

var timeout = null;

$(window).resize(function () {

if (timeout) {

clearTimeout(timeout);

timeout = null;

}

timeout = setTimeout(equalize, 250);

});

equalize();

});

通过使用css属性 - > display:table-cell

div {

border: 1px solid #000;

margin: 5px;

padding: 4px;

display:table-cell;

width:25%;position:relative;

}

body{display:table;

border-collapse:separate;

border-spacing:5px 5px}

This is my div one This is my div one This is my div one

This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two

This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3

网站文章