身高表的需要是相同的高度面板

我有一個高度30PX面板，此面板中我有一個單行表30PX高度。當它顯示在瀏覽器窗口上時，表格不會填滿面板的高度（頂部和底部顯示少量面板，如何解決這個問題以便表格佔據整個表格的高度？

HEADERPANELTABLE CSS：

table.masterHeader 
{ 
    background-color:transparent; 
    border-collapse:collapse; 
    height:30px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:0; 
    margin-bottom:0; 
    padding:0; 
    display:block; 
    width:820px; 
    }

HEADERPANEL CSS：

.HeaderPanel 
     { 
      background-color:#0079d0; 
      height:30px; 
      margin-left:auto; 
      margin-right:auto; 
      margin-bottom:0px; 
      margin-top:0px; 
      padding:0; 
      width:820px; 
      }

SPACER CSS：

div.Spacer 
{ 
    background-color:transparent; 
    height:30px; 
    }

的mainPanel CSS：

.MainPanel 
{ 
    background-color:#6699cc; 
    height:700px; 
    margin-left:auto; 
    margin-right:auto; 
    width:820px; 
    }

HTML代碼：

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 
</asp:ToolkitScriptManager> 
<div class="Page"> 
    <asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server"> 
     <table class="masterHeader" cellspacing="0" cellpadding="0"> 
      <tr> 
       <td class="Account"></td> 
       <td class="Name"></td> 
       <td class="Spacer"></td> 
       <td class="CompanyName"></td> 
       <td class="Logout"></td> 
      </tr> 
     </table> 
    </asp:Panel> 
    <asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender> 
    <div class="Spacer">&nbsp;</div> 
    <asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel"> 
     <div class="main"> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server"/> 
     </div> 
    </asp:Panel> 
</div> 
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3"> 
</asp:RoundedCornersExtender>

來源

2010-10-21 mattgcon

這不是你的HTML代碼。這需要在輸出生成的HTML之前在服務器端進行處理。查看頁面以查看真實HTML時查看源代碼。我認爲asp：面板總是被一個div取代，但它可能會顯示服務器端標記沒有的東西。 – Chris 2010-10-21 13:43:46

因爲ASP：面板將面板拆分爲div標籤並帶有圓角，因此它將1px邊框添加到放置在表格後面的面板上。爲了解決這個問題，必須將表格放置在div標籤中，並將面板上方的div浮動。

來源

2010-10-21 14:08:44 mattgcon

設置將cellspacing爲0

<table cellspacing="0"> 
    <tr> 
     <td></td> 
    </tr> 
</table>

來源

2010-10-21 12:51:13

我完全忘記了cellpacing，但是，這個想法並不奏效 – mattgcon 2010-10-21 12:58:05

如何重置表格的邊距和填充即表格{margin：0; padding：0;} – 2010-10-21 13:00:19

也嘗試過，但它沒有完成這項工作。 – mattgcon 2010-10-21 13:04:49

你有沒有在像螢火蟲，在那裏你可以看一下看了看網頁每個DOM元素，請參閱屬性（如邊距，填充等）。通過這種方式，您可以準確查看多餘空間的來源，以及對每個元素應用了哪些樣式屬性。

來源

2010-10-21 13:07:19

是的，我有，但我似乎無法找到問題領域。我確實在頂部面板（有問題的面板）和主面板之間有間隔，並且間隔正在向頂部面板滲出大約4-5個像素。 – mattgcon 2010-10-21 13:10:44

我將如何去向您展示有關的代碼？ – mattgcon 2010-10-21 13:11:07

你可以編輯你原來的文章，包括它 – 2010-10-21 13:14:20

您還沒有發佈任何代碼（HTML或CSS），或者表明你在看什麼瀏覽器，很難確定。幾點建議：

確保您的表具有零頁邊距
確保面板沒有任何填充
確保單元格間距是零
確保一些其他的元素是不會阻止表
請確保您的CSS樣式，是不是被過度纏身地方

如果你沒有它已經，您應該安裝網絡用於Firefox的rebug插件https://addons.mozilla.org/en-US/firefox/addon/1843/。這使得檢查應用的DOM和CSS樣式變得非常容易。

來源

2010-10-21 13:13:46

好吧，我補充了一個事實，即我使用IE8和Firefox，並在 – mattgcon 2010-10-21 13:18:49

中體驗它我不知道asp，是實際發送到瀏覽器的html嗎？鑑於所有的服務器標籤，我想不是。所以發佈實際發送給客戶端的html，或者更好的是，鏈接到頁面。 – 2010-10-21 13:29:12

我注意到你沒有對你的表格邊界做任何事情。這可能是你看到的差距嗎？如果因爲任何原因你的邊界有任何寬度，那麼他們可能會顯示哪些可能會給你帶來問題的效果。

我做了一個快速jsfiddle的概念證明，基於我認爲你輸出的HTML看起來像最簡單的形式。我不熟悉RoundedCornersExtender控件，但我懷疑是修改主div的HTML。

http://jsfiddle.net/tAgp3/1/

你可以看到，這種簡化形式的作品，但我認爲圓角正試圖做一些骯髒的把戲與嵌入額外的div背景做圓角。這些可能是什麼導致你的額外填充。

我再次問，如果你可以張貼輸出到瀏覽器實際 HTML，所以我們可以看到，如果是這樣的話還是不行。

來源

2010-10-21 13:45:59 Chris

實際上邊框被設置爲摺疊，背景顏色是透明的 – mattgcon 2010-10-21 14:01:11

ooops。我誤解了，會編輯答案。不過，你實際上並沒有明確擺脫你的邊界。邊框摺疊只能選擇你的邊框模型，它不會將它們摺疊爲無。 – Chris 2010-10-21 14:06:53

身高表的需要是相同的高度面板

回答

相關問題