的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不佔用全高

回答

相關問題