发表新帖
发表新帖

Full height and full width CSS layout

前端 未结
关注
4 1871
清歌不尽
清歌不尽 2021-02-02 00:47

I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:

   ┌────────────────────┐
   │          H         │
   ├─
相关标签:
4条回答
  • 栀梦
    2021-02-02 01:14

    Hi fmunkert (and others here:),

    I was just curious and thought want to try it out, so I fired up my notepad and come up with something like this:

    <html>
    <head></head>
<body style="margin: 0px; padding: 0px; height: 100%; width: 100%; text-align: center;">
<div style="height: 100%; width: 100%;">

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">H</div>

<div style="height:60%; width: 100%; display: table;">
<div style="float:left; height:100%; width: 20%; background-color: yellow;">A</div>
<div style="float:left; height:100%; width: 60%; background-color: grey;">B</div>
<div style="float:left; height:100%; width: 20%; background-color: yellow;">C</div>
</div>

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">F</div>

</div>
</body>
</html>

    and here's the output in Firefox:

    Firefox Screenshot

    and the output in IE8:

    IE8 screenshot

    I tested this using Firefox 3 and IE8. Seems ok to me. Is this what you wanted? :)

    Note 1: As mentioned by others, this may not be practical, but still it depends on what you / your clients want.

    Note 2: If this is really what you wanted, you can edit the height and width values according to your need, and you should put those CSS rules into a separate CSS file instead of inline styles as a best practice.

    0 讨论(0)
  • 挽巷
    2021-02-02 01:24

    The reason you can't find any CSS to do this is because the CSS spec doesn't really allow you to meet all these conditions without using at least one of the options that you don't want to use.

    The Holy Grail liquid layout is 100% CSS but does not meet your height criteria on its own: http://www.alistapart.com/articles/holygrail/

    You can fake the height criteria with the footer by using this method: http://www.themaninblue.com/writing/perspective/2005/08/29/

    This 24Ways article has a full-height column method using absolute positioning which solves a few of your problems but creates a new one in that one of your columns is always going to overflow if the content expands: http://24ways.org/2008/absolute-columns

    You will likely need to combine a number of methods to get something workable to your spec. I'd personally just use jquery because life is too short for messing around with CSS like this, but if you're dead-set on avoiding it, then prepare yourself for a lot of hacking around.

    0 讨论(0)
  • 时光取名叫无心
    2021-02-02 01:28

    There's no easy way to get an element to fill a given depth exactly when using percentage measurements.

    You could get close by anchoring the footer at the window bottom, then - if cols A and C both share a background colour but col B's background differs, set your body (or container div if present) background colour to match cols A + C to seamlessly fill the gaps beneath of those columns if they're shorter than col B.

    0 讨论(0)
  • 南旧
    2021-02-02 01:35

    http://jsfiddle.net/aGG3V/

    to set the header and footer height you have to set it in their style and also the .content padding and margin (this the negative version)

    0 讨论(0)
 看不清?
提交回复
热议问题