Высота стола должна соответствовать высоте панели - PullRequest
Новая
       4

Высота стола должна соответствовать высоте панели

0 голосов
/ 21 октября 2010

В IE8 и Firefox я испытываю следующее:

У меня есть панель высотой 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>

Ответы [ 5 ]

0 голосов
/ 21 октября 2010

Поскольку панель ASP: разбивает панель на теги div и скругляет углы, она добавляет еще одну границу в 1 пиксель к панели, которая размещается после размещения таблицы.Чтобы исправить это, таблицу нужно было поместить в тег div и поместить плавающий элемент над панелью.

0 голосов
/ 21 октября 2010

Я заметил, что вы ничего не делаете с границами таблицы.Может ли это быть разрыв, который вы видите?Если ваши границы имеют какую-либо ширину по какой-либо причине, то они могут показывать, что может дать вам нужный эффект.

Я сделал быстрое подтверждение концепции jsfiddle на основе того, что, как я предполагаю, ваш выведенный HTML будет выглядеть вего самая простая форма.Я не знаком с элементом управления RoundedCornersExtender, хотя и подозреваю, что он изменяет HTML основного div.

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

Вы можете видеть, что эта упрощенная форма работает, но я предполагаю, чтозакругленные углы пытаются сделать несколько неприятных трюков с встраиванием дополнительных DIV с фоном, чтобы сделать закругленные углы.Это может быть причиной вашего дополнительного заполнения.

Снова спрашиваю, можете ли вы опубликовать фактический html, выведенный в браузер, чтобы мы могли увидеть, так ли это.

0 голосов
/ 21 октября 2010

Вы смотрели на страницу в чем-то вроде Firebug, где вы можете посмотреть на каждый элемент DOM, увидеть атрибуты (такие как margin, padding и т. Д.).Таким образом, вы сможете точно определить, откуда берется этот дополнительный интервал и какие атрибуты стиля применяются к каждому элементу.

0 голосов
/ 21 октября 2010

Вы не разместили код (HTML или CSS) или не указали, в каких браузерах вы это видите, так что вам трудно это точно знать. Некоторые предложения:

  • убедитесь, что ваш стол имеет нулевые поля
  • убедитесь, что на панели нет отступов
  • убедитесь, что интервал между ячейками равен нулю
  • убедитесь, что какой-то другой элемент не блокирует таблицу
  • убедитесь, что ваш CSS-стиль не переназначен где-либо

Если у вас его еще нет, вам следует установить надстройку Firebug https://addons.mozilla.org/en-US/firefox/addon/1843/ для Firefox. Это позволяет очень легко проверить применяемые стили DOM и CSS.

0 голосов
/ 21 октября 2010

установите для ячейки 0 

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