А подскажите как быть в случае увеличение масштаба, таблица внутри среднего блока выходит за границы его и из за этого, правый блок перепрыгивает вниз.
|
А как сделать без min-height:calc(100% - 4em); в maintbl
.maintbl{ border:1px solid grey; box-sizing:border-box; background:#e4e5e6; flex:1; min-height:calc(100% - 4em); } Дело в том что дальше я добавил шапку и кучу горизонтальных линий(рамок) по 1-6px и из за этого страница вниз уезжает. |
pokk,
делайте минимальный макет, так может быстрее кто-то подскажет ... |
Убрал Clear добавил шапку и потом вручную крутил
min-height:calc(100% - 6.7em); подбирал 6.7 PS: как сделать что бы была кнопка посмотреть? <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> html{ height:100%; width:100%; } html *{ margin:0; padding:0; } body{ width:100%; height:100%; display:flex; flex-wrap:wrap; } .maintbl{ border:1px solid grey; box-sizing:border-box; background:#e4e5e6; flex:1; min-height:calc(100% - 6.7em); } .BodyLeft{ background:#008000; width:20%; } .BodyRight{ background:#F00; width:20%; } .bottom { padding-top:12px; height:2em; border-top: 1px solid white; border-bottom: 6px solid #000; width:100%; background:#e4e5e6; text-align:center; } .container{ text-align:center; } header { background: #e4e5e6; border-top: 6px solid #000; border-bottom: 1px solid #BBBCBD; /* height:35px; */ height:3em; width:100%; } .Border1{ border-top: 1px solid white; border-bottom: 1px solid #BBBCBD; } </style> </head> <header> <div class="container"> <h1>Заголовок</h1> </div> </header> <body> <div class="BodyLeft Border1">22222222</div> <div class="maintbl Border1">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон</div> <div class="BodyRight Border1">3333333333</div> <div class="bottom">7609098098</div> </body> </html> |
pokk,
[HTML run][/HTML] о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting |
pokk,
строка 81 => 74 |
pokk,
<html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> html, body{ height:100%; width:100%; } html *{ margin:0; padding:0; } .content{ width:100%; min-height:calc(100% - 6.7em); display:flex; } .maintbl{ border:1px solid grey; box-sizing:border-box; background:#e4e5e6; height: auto; flex:1; } .BodyLeft{ background:#008000; width:20%; } .BodyRight{ background:#F00; width:20%; } .bottom { padding-top:12px; height:2em; border-top: 1px solid white; border-bottom: 6px solid #000; width:100%; background:#e4e5e6; text-align:center; } .container{ text-align:center; } header { background: #e4e5e6; border-top: 6px solid #000; border-bottom: 1px solid #BBBCBD; /* height:35px; */ height:3em; width:100%; } .Border1{ border-top: 1px solid white; border-bottom: 1px solid #BBBCBD; } td{ height: 90px; border: 1px solid #0000CD } </style> </head> <body> <header> <div class="container"> <h1>Заголовок</h1> </div> </header> <div class="content"> <div class="BodyLeft Border1">22222222</div> <div class="maintbl Border1">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон<table style="width: 100%; border-size: 1px; border-color: #CC0000; border-collapse: collapse"> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> <tr> <td>table</td> <td>table</td> <td>table</td> </tr> </table></div> <div class="BodyRight Border1">3333333333</div> </div> <div class="bottom">7609098098</div> </body> </html> |
рони, так вот и каким образом тут
min-height:calc(100% - 6.7em); 6.7 получается ? и как его каждый раз не подпирать, мне надо что бы при открытии сайта не было прокрутки вниз |
pokk,
ждите специалистов по css |
Часовой пояс GMT +3, время: 13:15. |