的div不占用全高

我有一个9盒一个div结构，像这样：的div不占用全高

<div class="NBWrapper"> 
    <div class="NBTopRow"> 
     <div class="NBLeft" /> 
     <div class="NBRight" /> 
     <div class="NBMiddle" /> 
    </div> 
    <div class="NBMiddleRow"> 
     <div class="NBLeft">&nbsp</div> 
     <div class="NBRight">&nbsp</div> 
     <div class="NBMiddle">SharePoint WebPart goes here</div> 
    </div> 
    <div class="NBBottomRow"> 
     <div class="NBLeft" /> 
     <div class="NBRight" /> 
     <div class="NBMiddle" /> 
    </div> 
</div>

，并具有以下CSS规则：

.NBTopRow .NBLeft { 
height: 18px; 
width: 18px; 
float: left; 
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat; 
} 
.NBTopRow .NBRight { 
height: 18px; 
width: 18px; 
float: right; 
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat; 
} 
.NBTopRow .NBMiddle { 
margin-left: 18px; 
margin-right: 18px; 
height: 18px; 
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x; 
} 
.NBMiddleRow .NBLeft { 
width: 18px; 
float: left; 
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y; 
} 
.NBMiddleRow .NBRight { 
width: 18px; 
float: right; 
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y; 
} 
.NBMiddleRow .NBMiddle { 
margin-left: 18px; 
margin-right: 18px; 
background-color: #ffffff; 
} 
.NBMiddleRow { 
height: 100%; 
} 
.NBBottomRow .NBLeft { 
height: 18px; 
width: 18px; 
float: left; 
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat; 
} 
.NBBottomRow .NBRight { 
height: 18px; 
width: 18px; 
float: right; 
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat; 
} 
.NBBottomRow .NBMiddle { 
margin-left: 18px; 
margin-right: 18px; 
height: 18px; 
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x; 
}

一切都在正确的地方，然而，具有正确的属性，中间行的NBLeft和NBRight元素没有占用任何高度。使用高度：100％没有任何效果。

我已添加& nbsp，仍然没有。

我通常很喜欢这种东西，但我很难过。有人有建议吗？

来源

2012-06-28 John S

你试过'min-height'吗？ –

高度将取决于父元素。所以如果你想为NBLeft和NBRight设置高度为100％，你必须先设置NBTopRow，NBMiddleRow和NBBottomRow。然后反过来，如果你想要100％的高度，你必须设置NBWrapper高度。另外，您不能自我关闭div元素。 –

divs是通过sharepoint生成的，而顶部和底部的行很好。它仅适用于中间行的左侧和右侧。 –

我最终什么事做了结构调整的div：

<div class="NBWrapper"> 
<div class="NBTopRow"> 
    <div class="NBLeft" /> 
    <div class="NBMiddle" /> 
    <div class="NBRight" /> 
</div> 
<div class="NBMiddleRow"> 
    <div class="NBLeft">&nbsp</div> 
    <div class="NBMiddle">SharePoint WebPart goes here</div> 
    <div class="NBRight">&nbsp</div> 
</div> 
<div class="NBBottomRow"> 
    <div class="NBLeft" /> 
    <div class="NBMiddle" /> 
    <div class="NBRight" /> 
</div> 
</div>

带走了彩车和属性的边距并加上：

.NBWrapper { 
display: table; 
border-collapse: collapse; 
border-spacing: 0; 
width: 100%; 
} 

.NBTopRow, .NBMiddleRow, .NBBottomRow { 
display: table-row; 
} 

.NBLeft, .NBRight, .NBMiddle { 
    display: table-cell; 
}

您可能会问，为什么不使用表格？ SharePoint 2010可能会少用它们，但是它的静态表格会一直下降。我更喜欢使用div结构。

来源

2012-06-28 21:29:31

您NBleft & NBright是自闭使它像<div></div>

来源

2012-06-28 16:59:54 SVS

使用sharepoint来做到这一点的唯一方法是将文字放在文字控件中，并将其添加到生成此div结构的面板中。我已经做到了，没有结果。 –

是您正在使用的HTML版本正确支持自动关闭的div？你可以尝试使用吗？

我可以看到... ...

<div class="NBMiddle">SharePoint WebPart goes here<div>

应该是...

<div class="NBMiddle">SharePoint WebPart goes here</div>

另一件事是尝试溢出：汽车在CSS类的div得到安宁，你的麻烦。只要div有内容，CSS就会确保它显示。

来源

2012-06-28 17:05:16 wabbit42

会改变像斯瓦尔巴特群岛这样的自我关闭区域暗示 – wabbit42

对不起，当我提出这个问题时，这是一个错误。div结构实际上没有。 –

我不是100％确定你要做什么，但下面的帮助吗？我已经为所有内容添加了边界，以便您可以看到发生了什么。

的HTML ...

<html> 

<head> 
    <link rel="stylesheet" media="screen" href="bla.css" > 
</head> 

<body> 

<div class="NBWrapper"> 
    <div class="NBrow"> 
     <div class="NBcell">Top Left</div> 
     <div class="NBcell">Top Middle</div> 
     <div class="NBcell">Top Right</div> 
    </div> 

    <div class="NBrow"> 
     <div class="NBcellFullHeight">Middle Left</div> 
     <div class="NBcellFullHeight">Middle Middle</div> 
     <div class="NBcellFullHeight">Middle Right</div> 
    </div> 

    <div class="NBrow"> 
     <div class="NBcell">Bottom Left</div> 
     <div class="NBcell">Bottom Middle</div> 
     <div class="NBcell">Bottom Right</div> 
    </div> 
</div> 

</body> 
</html>

然后CSS ...

.NBWrapper { 
    width: 800px; 
    margin: auto; 
} 

.NBcell { 
    width: 266px; 
    float: left; 
    border: 1px solid #000000; 
} 
.NBrow { 
    float: left; 
    width: 804px; 
    border: 1px solid #000000; 
} 

.NBcellFullHeight { 
    width: 266px; 
    float: left; 
    height: 500px; 
    border: 1px solid #000000; 
}

来源

2012-06-28 19:15:52 wabbit42

这是用于SharePoint 2010 Web部件的代码中生成的用户控件。它必须允许在可以是任何宽度的webpart区域中动态放置，并且能够根据内容垂直扩展。我不能指定明确的高度或宽度除了角落（18x18），顶部/底部边框（高度：18px）和左/右边框（宽度：18px）。顶部和底部边框都呈现正确，但是左侧和右侧边框不能说相同。他们有正确的宽度，但高度为0。 –

的div不占用全高

回答

相关问题