Przewijanie komórki w 100% wysokości TABELA

Przykro mi, jeśli już udało się odpowiedzieć, ale trudno jest wyszukać coś z "100% wysokością".Przewijanie komórki w 100% wysokości TABELA

Mój problem polega na tym, że potrzebuję 100-procentowego układu tabeli wysokości z powodu automatycznej zmiany rozmiaru komórki wykonywanej przez przeglądarkę, której nie chcę sam napisać z oczywistych powodów.

Różni się od innych "100% problemów", ponieważ potrzebuję niektórych komórek, aby trzymać się na górze, a niektóre na dole, i mają średnią zmianę rozmiaru przeglądarki, aby wypełnić pozostałą przestrzeń.

Ten rodzaj prac, problem pojawia się, gdy potrzebuję, aby ta środkowa część zawierała przepełnione rzeczy, i oczywiście chcę przepełnienia: auto tam, aby umożliwić użytkownikowi przechodzenie przez te rzeczy. Działa w WebKit, w Firefox, nie robi, inne nie testowane. Oto przypadek testowy.

<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>

Źródło

2009-10-19 skrat

Myślę, że trzeba przeformułować swoje pytanie. W tej chwili wygląda na to, że mówisz: "Chcę osiągnąć X, więc muszę użyć Y .. jak mogę sprawić, żeby Y działało?" Myślę, że powinieneś zapytać "Chcę osiągnąć X .. jaki jest najlepszy sposób na osiągnięcie mojego celu". – codeinthehole

Wiele lat później i to jeszcze nie jest rozwiązane :( – stej

-2

Nie jestem pewien, czy rozumiem, dlaczego trzeba użyć tabeli. Jeśli Twoim celem jest stworzenie układu, który zawsze obejmuje całą wysokość okna przeglądarki, gdy zawartość w środku jest mała i dostosowuje się pionowo, gdy zawartość się zwiększa, to potrzebujesz tylko 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 dla jak to zrobić (wszystko zrobiłem było edytować kolory tła pojemnika i ciała div by stworzyć iluzję, że środkowa zawartość rozpięta 100% wzrost. Zmienić szerokość CSS, etc ... aby dopasować swój układ).

Źródło

2010-01-17 15:36:54 Choy

po prostu odpowiedzi na pytanie, jak to dzisiaj i wierzę, że szukasz tego samego, here jest sama i moja odpowiedź pytanie:

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%; 
}

Pełny widok: http://jsfiddle.net/8abeU/show/ Fiddle: http://jsfiddle.net/8abeU

Źródło

2012-01-12 02:36:05

działa, niestety moja aplikacja utknęła w latach 90. (tryb Quirks IE8) i dlatego nie zachowuje się zgodnie z oczekiwaniami. –

Przewijanie komórki w 100% wysokości TABELA

Odpowiedz

Powiązane problemy