Fatal编程技术网
  • css/
  • Css 潜水舱未达到全高度

Css 潜水舱未达到全高度

css

Css 潜水舱未达到全高度,css,Css,我有一个带有div结构的9盒，如下所示： <div class="NBWrapper"> <div class="NBTopRow"> <div class="NBLeft" /> <div class="NBRight" /> <div class="NBMiddle" /> </div> <div class="NBMiddleRow">

我有一个带有div结构的9盒，如下所示：

<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>
所有内容都位于正确的位置并具有正确的属性。但是，中间行的NBLeft和NBRight元素没有占据任何高度。使用高度：100%没有任何效果

我已经添加了，但仍然没有添加任何内容

我通常对这类东西很在行，但我被难倒了。有人有什么建议吗？

您的NBleft&NBright是自动关闭的，就像您使用的HTML版本正确支持自动关闭div一样？你可以试着用它来代替吗

我可以看到

<div class="NBMiddle">SharePoint WebPart goes here<div>
应该是

<div class="NBMiddle">SharePoint WebPart goes here</div>
另一个要尝试的是溢出：div的CSS类中的auto会给您带来麻烦。只要div有内容，CSS就会确保它被显示

我不是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>
我最终做的是重组部门：

<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>
你可能会问，为什么不用桌子呢？SharePoint 2010可能会使用较少的表，但它的表仍然会一直向下。我更喜欢使用div结构。

该高度将取决于父元素。因此，如果要将NBLeft和NBRight的高度设置为100%，必须首先设置NBTopRow、NBMIDLEROW和NBBottomRow。然后反过来，如果你想让它们达到100%的高度，你必须设置它们的高度。此外，您不能自行关闭div元素。div是由sharepoint生成的，对于顶行和底行，它们都可以。它只适用于左边和右边的中间行，会改变像斯瓦尔巴德岛建议这样的自闭式div，这是我提出问题时的一个错误。div结构实际上没有这个功能。使用sharepoint实现这一功能的唯一方法是将文本控件添加到生成此div结构的面板中。我已经这样做了，但没有结果。这是在SharePoint 2010 Web部件的代码中生成的用户控件。它必须允许动态放置在任何宽度的Web部件区域中，并且能够根据内容进行垂直扩展。除了角18x18、上/下边框高度：18px和左/右边框宽度：18px之外，我无法为任何对象指定明确的高度或宽度。顶部边界和底部边界都正确渲染，但左边界和右边界不能说相同。它们的宽度正确，但高度为0。 
.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;
}

<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;
}