HTML/CSS设置div来兄弟

的高度我已经包含在第三2分div的。其中一个被包含的div向左漂移，另一个向右漂移。我希望2兄弟div始终保持在同一个高度，但是我有这个问题。到目前为止，我只在Firefox浏览页面，并且认为在使用至少一个浏览器工作后，我会担心任何跨浏览器问题。HTML/CSS设置div来兄弟

下面是标记：

<div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
     ... 
    </div> 
    <div id="right-div" class="border"> 
     ... 
    </div> 
</div>

这里是CSS：

#main-container  { position: relative;        min-height: 500px; } 
    #left-div  { position: relative; float: left; width: 700px; min-height: inherit; } 
    #right-div  { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; } 

.clearfix:after  { content: " "; display: block; height: 0; clear: both; visibility: hidden; } 
.clearfix   { display: inline-block; _height: 1%; clear: both; } 
.clearfix   { display: block; clear: both; } 
.border    { border: solid 1px #000; }

如果#left-div含量大于500px长，#right-div不扩大相匹配。在我试过的一个例子中，Firefox表示#main-container的计算样式高度为804px，#left-div的计算样式高度为800px，#right-div的计算样式高度为586.2px，因为它已扩展以适合自己的内容。

我明白我可能要对这个错误的方式，如果这是一个重复的问题，那么我很抱歉，但我不能肯定什么搜索下。

来源

2010-04-26 Paul Woolcock

有人说了''

？ – 2010-04-26 17:11:09

Pure css，no。但是，根据Pekka的建议，您可以使用'table'，或者如果您不介意使用它，则使用Javascript。 – 2010-04-26 17:18:11

表格布局？ *不寒而栗* – 2010-04-26 17:18:17

回答

我可以机架我的大脑所有我想要的，但我认为这真的可以只用表的行为，即使用<table>小号解决，（如果你需要IE6 and IE7 compatible）或display: table/table-row/table-cell（这实际上是同样的事情，但赢得了”在同伴面前让你难堪，因为桌子是邪恶的;）。

我会去的表。

随意证明我错了，并张贴一个健全的CSS的解决方案，我会很高兴！

来源

2010-04-26 17:15:16

IE7也出来了，用“display：table” – tom 2010-04-26 17:22:02

@tom youre right，cheers。编辑。 – 2010-04-26 17:33:23

我真的结束了与JavaScript解决方案......该页面已经加载jquery，所以它是微不足道的添加代码来调整div高度......谢谢！ – 2010-04-28 13:57:38

我认为你有以下选择：

人造列 - 使用的div容器重复的背景图像创建等高
的外观使用表
使用JavaScript来调整DIV高度
使用JavaScript来对CSS的支持添加到非兼容的浏览器

来源

2010-04-26 17:19:07 tom

我用人造色谱柱： http://matthewjamestaylor.com/blog/equal-columns-cross-browser-css-no-hacks – 2010-05-28 15:03:07

为了要用HTML和CSS来使用div，你需要使用JavaScript来检查它们的高度，然后改变它来匹配。

如果你不想使用JavaScript，和你的网站有一个特别的设计，在你的第三个格，你可以给它一个重复-Y背景图像，将扩大为两个div的人做。例如，假设你的两个div有一个蓝色背景，而你的第三个div有一个灰色背景。删除蓝色背景并使用蓝色和灰色创建可重复的图像，并将该图像放置在第三个div上。这样，随着它的扩展，它会出现两个div。

来源

2010-04-26 17:20:29 Braxo

这将允许右div的高度始终是左侧为左的增长动态基于内容，但正确的永远不会比最小高度较大，如果左边有更少的内容，这可能是你可以接受的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Matching Size Divs</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<style> 
    #main-container { position:relative; min-height:500px; }  
    #left-div { width:700px; min-height:500px; }  
    #right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }  
</style> 
</head> 
<body> 
    <div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
     ... 
    </div> 
    <div id="right-div" class="border"> 
     ... 
    </div> 
</div> 
</body> 
</html>

来源

2010-04-26 17:47:13 David

我认为这是可以通过同时指定的div（即左格&右格）高度为100％实现。这样，如果没有为html/css指定容器div的高度，那么它们将占用容器div的高度&，那么容器div也会展开以适应其子元素。我知道它很晚，但它可能会为你节省剧本。

来源

2011-02-18 22:22:16

也这么认为，但这在我的情况下不起作用。似乎100％没有成功计算出父母的身高。 – 2017-08-20 09:06:45

即使现在这么多年后你的评论是正确的，％高度不会计算。当你认为它会有用时会感到羞愧。 – Chris 2017-10-15 09:35:51

，如果没有足够的空间，他们会叠加。确保包含这两个div的宽度足以让它们两者都...如果你删除它们的宽度进行测试，我敢打赌它会起作用。

来源

2011-03-24 13:27:48 trgraglia

你应该问自己的第一件事是 - 为什么你需要他们在同一高度？是因为：

你想要背景是相同的大小？
中间的边框是一样的高度？
还是有上需要内嵌在其他分区的底部显示底部的一些内容？

1）如果你想要的背景是相同的大小，那么我劝你CSS样式父格，在最坏的情况 - 所以它适合编辑的背景图像。随着CSS2您可以定位的背景容易

{ 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:center; 
}

2）每当我在你的问题绊倒，我需要中心边界是相同的高度。解决方案很简单 - 将边框样式应用于最长的DIV。

3）将这两个内容合并到第三个兄弟DIV，如果你不能，那么你将需要JavaScript。或者Pekka说 - 如果你不关心IE，可以使用display: table。

来源

2012-01-06 07:54:07

我正在处理中心边界问题，但是任何一个Div的内容都很灵活。我的解决方案是设置border-right（左div）和border-left（右div），然后将右div的margin-left设置为-1px。这种方式要么可以是最长的，边界将重叠。 – 2014-06-22 17:28:44

这周我就遇到了这个问题好几次，这个话题是我来到找到一个具体的答案最接近的。这是@ Pekka对那些需要更多继续的人的回应的扩展，我当然这样做。

jsFiddle

例如HTML：

<div class="view-table"> 
    <div class="view-row"> 
     <div class="view-type">Type</div> 
     <div class="view-name"> 
      Lorem ipsum dolor sit amet, at assum gubergren his, 
      ex iudicabit dissentiunt intellegebat has. Ne odio detraxit 
      instructior vim. Fugit velit consetetur an eos. 
      Ea suas veri mnesarchum mel. 
     </div>     
    </div> 
</div>

例如CSS：

.view-table 
{ 
    display:table; 
    width:100%; 
} 
.view-row 
{ 
    display:table-row; 
} 
.view-row > div 
{ 
    display: table-cell; 

} 
.view-name 
{ 
    text-align:right; 
    background-color: lightblue; 
} 
.view-type 
{ 
    background-color: pink; 
}

来源

2015-02-11 21:32:04

如果你知道你想设置页面的高度内div的的布局你可以做这样的事情：http://codepen.io/anon/pen/vOEepW

<div class="container"> 
    <div class="secondary-content"> 
    <div class="content-inner"> 
    </div> 
    </div> 
    <div class="main-content"> 
    </div> 
</div>

将包含div的位置设置为：relative，然后将其中一个内部div设置为绝对位置，以允许另一个“未设置”div来有效控制两者的高度。

.container { 
    position: relative; 
} 
.main-content { 
    width: 80%; 
    margin-left: 20%; 
    height: 300px; 
    background-color: red; 
} 
.secondary-content { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 20%; 
    overflow-y: scroll; 
}

也可以做到这一点，也许使用flexbox更容易，但它有一些浏览器支持问题。

来源

2015-04-27 13:56:00 jgkingston

什么是Flexbox方式？浏览器支持现在很好.. – 2017-06-20 21:13:12

这有点超出范围，但我有一个讨厌的Javascript解决方案。

HTML：

<div id="element-without-height" copy-size="#element-with-height"></div> 
<div id="element-with-height"></div>

的Javascript（使用jQuery）：

$(document).ready(function() { 
    $(window).on('resize', function() { 
     $('[copy-size]').each(function() { 
      var copyEl = $($(this).attr('copy-size')); 
      var targetEl = $(this); 
      targetEl.width(copyEl.width() + 'px'); 
      targetEl.height(copyEl.height() + 'px'); 
     }); 
    }); 
});

来源

2017-11-27 20:49:54 hawaii

HTML/CSS设置div来兄弟

回答

相关问题