Прокрутка ячейки в 100% -ной высоте ТАБЛИЦА

Прошу прощения, если на это уже был дан ответ, но сложно найти что-то с «100% -ой высотой».Прокрутка ячейки в 100% -ной высоте ТАБЛИЦА

Моя проблема заключается в том, что мне нужна компоновка таблицы высот 100% из-за автоматического изменения размера ячейки, выполненного браузером, и я не хочу писать сценарий по понятным причинам.

Он отличается от других «100% -ых проблем», поскольку мне нужно, чтобы некоторые ячейки держались сверху, а некоторые внизу, а средний размер был изменен браузером, чтобы заполнить оставшееся пространство.

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

<html> 
<head> 
    <style> 

     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     table { 
      height: 100%; 
      width: 200px; 
      border: 0; 
     } 

     .fill { 
      background-color: red; 
     } 

     .cont { 
      overflow: auto; 
      height: 100%; 
     } 

    </style> 

</head> 
<body> 
    <table> 
     <tr> 
      <td style="height:50px"></td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
     <tr> 
      <td class="fill"> 
       <div class="cont"> 
        An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
    </table> 
</body>

источник

2009-10-19 skrat

Я думаю, вам нужно перефразировать ваш вопрос. На данный момент это звучит так, как будто вы говорите: «Я хочу достичь X, поэтому я должен использовать Y .. как я могу заставить Y работать?» Я думаю, вы должны спросить: «Я хочу достичь X .. что лучший способ достичь моей цели». – codeinthehole

Много лет спустя, и это еще не решено :( – stej

-2

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

<html> 

<head> 
<style> 

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    height:100%; /* Necessary for IE 
    position:relative; 
    background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */ 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
    background-color: red; /* Set equal to background-color of #container */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

</style> 
</head> 

<body> 

<div id ="container"> 
    <div id="header"></div> 
    <div id="body"> 
    This is resizable. 
    </div> 
    <div id="footer"></div> 
</div> 

</body> 

</html>

Refer to this guide для того, как сделать это (все, что я сделал редактирование цвета фона контейнера и телом дивы, чтобы создать иллюзию, что среднее содержание охватывает высоту 100%. Отрегулировать ширину CSS, и т.д. ... чтобы соответствовать вашему расположению).

источник

2010-01-17 15:36:54 Choy

Я просто ответил на вопрос, как это сегодня, и я считаю, что вы ищете то же самое, here это сам и мой ответ вопрос:

HTML

<div class="container"> 
    <div class="twenty"> 
     fixed height 20 
    </div> 
    <div class="fifty"> 
     fixed height 50 
    </div> 
    <div class="hundred"> 
     fixed height 100 
    </div> 
    <div class="auto"> 
     <div class="content"> 
      .... 
     </div> 
    </div> 
    <div class="fifty" style="border-bottom:none; border-top:1px solid"> 
     fixed height 50 
    </div> 
</div>

CSS

html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

.container { 
    width:100%; 
    height:100%; 
} 

.twenty, .fifty, .hundred, .auto { 
    border-bottom:1px solid black; 
} 

.twenty { 
    height:20px; 
} 

.fifty { 
    height:50px; 
} 

.hundred { 
    height:100px; 
} 

.auto { 
    height:100%; 
    overflow:hidden; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
    margin:-120px 0; 
    padding:120px 0; 
} 

.content { 
    float:left; 
    overflow:auto; 
    height:100%; 
} 

.content{ 
    width:100%; 
}

Full view: http://jsfiddle.net/8abeU/show/ Fiddle: http://jsfiddle.net/8abeU

источник

2012-01-12 02:36:05

работает, к сожалению, мое приложение застряло в 90-х (режим Quirks Mode IE8), и поэтому он не ведет себя так, как ожидалось. –

Прокрутка ячейки в 100% -ной высоте ТАБЛИЦА

ответ

Смежные вопросы