Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > как установить высоту таблицы 100% в мозиле?


Автор: draiv 11.9.2007, 17:55
Установил высоту таблицы 100%, в IE отображается как надо,
а в мозиле высота устанавливается по контенту.
Нашел в инете, что нужно указать 
<style>
  body, html {
    height:100%;
    margin:0px;
    padding:0px
  }
</style>
Сделал ето-никакого эффекта, высота в мозиле не изменилась.
Как заставить мозилу отображать таблицу со 100% высотой?

Автор: Mymik 11.9.2007, 21:12
Модератор: Перемещено из раздела http://forum.vingrad.ru/forum/dotnet-asp-net.html  

Автор: SelenIT 11.9.2007, 22:58
draiv, должно все работать:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body { height: 100%; margin: 0; padding: 0; }
table { height: 100%; width: 100%; }
td { background: #888; }
</style>
</head>
<body>
<table>
  <tr>
    <td>Text 1</td>
    <td>Text 2</td>
  </tr>
  <tr>
    <td>Text 3</td>
    <td>Text 4</td>
  </tr>
</table>
</body>
</html>

Само собой, задавать высоту (а по-хорошему, и ширину тоже) нужно исключительно стилями, а не отсутствующим в стандарте атрибутом height;).

Автор: draiv 12.9.2007, 10:32
Чтото не получается никак.
у меня следующая структура страницы (без содержимого):
Код

<%@ Master Language="C#" AutoEventWireup="true" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head runat="server">
  <link rel="stylesheet" href="~/css/Style.css" />
</head>
<body bgcolor="#E1EBF4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="Red" >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" class="top_side">
            <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
                <tr bgcolor="#ffffff">
                    <td height="66" style="width: 651px"><img src="~/images/0.gif" runat="server" alt="" width="30" height="1" border="0">
                    </td>
                    <td style="width:100%">
                        <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
                            <tr>
                                <td valign="top" align="right" padding-right: "10px" width="100%">
                                </td>
                            </tr>
                            <tr>
                                <td valign="bottom" align="right" style="padding-right:10px">
                                    <!-- Menu -->
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td class="cur_tab" runat="server" id="tdJS">
                                            </td>
                                            <td></td>
                                            <td class="tab" runat="server" id="tdBJ">
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- End Menu -->
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr bgcolor="#009DCF">
                    <td height="19" style="width: 651px"></td>
                    <td colspan="2"></td>
                </tr>
                <tr bgcolor="#EFEFEF">
                    <td style="width: 651px">
                    </td>
                    <td valign="bottom" colspan="2" align="right">
                        <!-- Search Form -->
                        <form name="serch_form"  action="<%=FormAction %>" method="get">
                            <table border="0" cellspacing="0" cellpadding="2">
                                <tr>
                                    <td colspan="2"><input type="text" class="input" name="q" style="width: 210px;" value="<%=Q %>"></td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="small_text"></td>
                                </tr>
                                <tr>
                                    <td><input type="text" class="input" name="l" style="width: 180px;" value="<%=L %>"></td>
                                    <td style="width: 68px"></td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="small_text" height="20" valign="top"></td>
                                </tr>
                            </table>     
                        </form>     
                        <!-- End Search Form -->
                        
                    </td>
                </tr>
                <tr bgcolor="#009DCF">
                    <td height="19" colspan="3" class="menu">
                    </td>
                </tr>
                <tr>
                  <td style="height: 100%" colspan="3" valign="top">
              [color=red]<table cellpadding="0" cellspacing="0" border="0" width="100%" class="tbl">
              <tr>
                <td id="tdLeftMenu" valign="top"  runat="server" style="width: 501px; padding:15px;" bgcolor="#f3f7fb">
                </td>
                <td id="tdContent" valign="top" height="100%" runat="server" style="width: 85%" >
                  <div id="dvContentCaption" runat="server" visible="false" 
                    style="background-color:#ffffff; color:#009dcf; font-weight:bold; font-size:14; height:18;  
                    vertical-align:middle; padding-left:10; padding-top:3; padding-bottom:3;"></div>
                  <!-- Content -->
                    <div class="block">
                      <asp:ContentPlaceHolder ID="MasterContent" runat="server"/>
                    </div>
                  <!-- End Content -->
                </td>
              </tr>      
            </table> [/color]
          </td> 
              </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td valign="bottom" class="bottom_side" height="20">
        </td>
    </tr>
</table>
<script src="qwerty" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2348322-3";
urchinTracker();
</script>

</body>
</html>



И в css я указал:
html, body { height: 100%; margin: 0; padding: 0; }
.tbl {height: 100%; }
Все равно выделеная таблица остается в мозиле с высотой по контенту,
именно эта таблица-высшестоящий над ней контейнер <td> имеет 100% высоту.
Может имеет какое значение, что это MasterPage? 
Перепробовал и в тексте страницы указывать html, body { height: 100%; margin: 0; padding: 0; }
и <table style="height:100%"> - все равно не 100%.

(если задать в стиле table{height:100%}, то эта таблица все равно по контенту, 
а меняется высота других блоков, что не есть хорошо-они не должны менятся.

Если кому не влом глянуть-подскажите плз, что еще можно сделать?

Автор: Electra 6.12.2007, 04:08
вопрос остался незмаеченным?

Автор: triMMer 23.1.2008, 15:50
У меня похожая проблема, есть таблица в одну строку в каждой ячейке - вложенная таблица, необходимо ( почти жизненно ) что бы строки в этих таблицах были одиноковой высоты, для удобства просмотра, но все мои попытки явно задать высоту и ширину ячейки ни к чему не привели - ячейки получаются разной высоты, в зависимости от динамического контента (( 

Автор: bazzjr 24.1.2008, 15:56
хех чувак... Сколько  б я не старался сделать CONTENT 100% по высоте,... ниче не получается!
ИМХО моё мнение-это боОльшие ошибки в табличной "концепции", и браузер FF видит 100% высоту не во всех ячейках, т.е. в каких-то видит(работает 100%height), в каких-то нет - типа баги. Отсюда вывод - пересмотреть табличную иерархию, и по возможности использовать div'ную верстку.

либо убрать :
______________________>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="tbl">
              <tr>
                <td id="tdLeftMenu" valign="top"  runat="server" style="width: 501px; padding:15px;" bgcolor="#f3f7fb">
                </td>
                <td id="tdContent" valign="top" height="100%" runat="server" style="width: 85%" >
                  <div id="dvContentCaption" runat="server" visible="false" 
                    style="background-color:#ffffff; color:#009dcf; font-weight:bold; font-size:14; height:18;  
                    vertical-align:middle; padding-left:10; padding-top:3; padding-bottom:3;"></div>
                  <!-- Content -->
                    <div class="block">
                      <asp:ContentPlaceHolder ID="MasterContent" runat="server"/>
                    </div>
                  <!-- End Content -->
                </td>
              </tr>      
            </table> 
______________________>
и тогда то поле откуда убираем это ^, нормано езиниться...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)