There is such a code:

jsfiddle

.html, .body { margin: 0; height: 100%; } .wrap { width: 100%; height: 100%; } .block1 { width: 100px; height: 100%; background-color: blue; float: left; } .block2 { width: 100%; height: 50px; background-color: red; } .block3 { width: 85%; float: right; } table { width: 100%; border: 1px solid; } td { width: 10%; height: auto; } 
 <div class="wrap"> <div class="block1"> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> </ul> </div> <div class="block2"></div> <div class="block3"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> </table> </div> </div>

the whole problem is that: the blue block does not stretch to the full height of the screen, and the block with the table during resizing falls down, but must be compressed. How to do it, and generally it is possible? tried a hundred options, plz help?

  • one
    Here is part of the answer: the blue block is now stretched to the full width of the screen: .block1{ position: fixed; overflow: auto; width: 100px; height: 100%; float:left; } .block2{ margin-left:100px;} .block1{ position: fixed; overflow: auto; width: 100px; height: 100%; float:left; } .block2{ margin-left:100px;} .block1{ position: fixed; overflow: auto; width: 100px; height: 100%; float:left; } .block2{ margin-left:100px;} - Shilgen

1 answer 1

 html, body { height: 100%; } #wrapper { height: 100%; } #main { position: relative; height: 100%; width: 100%; overflow: auto; display: table; table-layout: fixed; overflow: auto; } #side { background-color: blue; width: 150px; vertical-align: top; display: table-cell; } #side-stuff { display: block; } #content { display: table-cell; } #content-stuff { width: auto; height: auto; } .block2 { width: 100%; height: 50px; background-color: red; } table { width: 100%; border: 1px solid; } td { width: 10%; height: auto; } 
 <div id="wrapper"> <div id="main"> <div id="side"> <div id="side-stuff"> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> </ul> </div> </div> <div id="content"> <div id="content-stuff"> <div class="block2"></div> <div class="block3"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> </table> </div> </div> </div> </div> </div>

Look at jsfiddle