All geek questions in one place

How to combine a fixed-height header with a flexible page layout

Problem: how to combine fixed heights with flexible page layout?

  • "bodyDiv" height should be: 100% (window.innerWidth is less? px ).
  • "a" and "b" height should be: 50% (body.div.height smaller? px ).
<HTML>
    <body>
        <div id="headerDiv" style="height:?px">fixed height</div>
        <div id="bodyDiv" style="height:100%">flexible height
            <div id="a" style="height:50%">flexible height</div>
            <div id="x" style="height:?px">fixed height</div>
            <div id="b" style="height:50%">flexible height</div>
            ...
        </div>
    </body>
<HTML>

It was fully developed in JavaScript, but it looks awful to load pages and resize events because it is too slow, although I did my best to optimize it for speed.

CSS expressions are not options either, because knowledge that will in any case be limited to IE 5-7.

, 3 , , , , , , , .

+3
4

.

- :

<table style="height:100%;width:100%">
  <tr style="vertical-align:top;height:50px;background-color:#faa;">
    <td>Fixed</td></tr>
  <tr style="vertical-align:top;background-color:#afa;">
    <td>Flexible</td></tr>
  <tr style="vertical-align:top;height:100px;background-color:#faa;">
    <td>Fixed</td></tr>
  <tr style="vertical-align:top;background-color:#afa;">
    <td>Flexible</td></tr>
</table>

v, div CSS.

P.S , .

+6

, CSS/HTML. , . SO ( , ):

"", . , .

+1

, :

  • 100%
  • ares 100%
  • JavaScript /
  • css-, /
  • script - 4) 5)
<html>
  <style type="text/css" media="all">
    html,body,table,div{height:100%;width:100%;}
    html * {outline:0;border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;}
    div{float:left}
  </style>
  <body>
    <table>
      <tr style="height:100px;background-color:red;"><td>Fixed</td></tr>
      <tr style="height:100%;"><td>
        <div style="width:25%;margin-right:-4px;background-color:green;">Flexible</div>
        <div style="width:8px;background-color:silver;cursor: e-resize;"></div>       
        <div style="width:50%;margin-right:-4px;margin-left:-4px;background-color:blue;">Flexible</div>
        <div style="width:8px;background-color:silver;cursor: e-resize;"></div>     
        <div style="width:25%;margin-left:-4px;">
          <div style="height:33.33%;margin-bottom:-4px;margin-top:-0px;background-color:green;">Flexible</div>
          <div style="height:8px;background-color:silver;cursor: n-resize;"></div>          
          <div style="height:33.33%;margin-bottom:-4px;margin-top:-4px;background-color:blue;">Flexible</div>
          <div style="height:8px;background-color:silver;cursor: n-resize;"></div>          
          <div style="height:33.33%;margin-bottom:-0px;margin-top:-4px;background-color:yellow;">Flexible</div>
        </div>
      </td></tr>
      <tr style="height:20px;background-color:red;"><td>Fixed</td></tr>
    </table>
  </body>
</html>

( ) (divs ). . , , !

divs css , , , , "". , , "" , . , .

: 4px /, . , 8px , -4px * 2 . ?

0

, css . CSS- , CSS ? ? ??? "" CSS, , CSS. ? , , , /2 , / CSS ... , Word . CSS- x2 , ! , CSS- 100% - , :

<table width=100% height=100%><tr><td align="center" valign="middle">Some text</td></tr></table>


* {
margin:0px;
padding:0px;    
}

html, body {
height:100%;
min-height: 99%;
}

.test {
border: 1px solid #cccccc;
height:100%;
position:relative;
}

.test2{
display:inline;
height:24px;
width:24px;
left:50%;
top:50%;
}
<div class="test"><div class="test2">test</div></div>

, CSS , ? ? , - , ? / : D ? , "" "" , 1 0? / ? , DIV SPAN P , .

: , , , , , , , css css +! , css . , , css .:) , CSS-, , 3 , , CSS-, , ... , , CSS .

:) <div width="100%" height="100%">test</div>

0
source

Source: https://habr.com/ru/post/1704259/

More articles:


All Articles