CODEWITHSUNDEEP
htmlcssresponsive-designcss-position
Jun Wei Lee
Jun Wei Lee

Reputation: 1022

Expand relative positioned parent to height of absolute child

I intend to have a fluid height header, with a middle content section that expands to the available height and a footer anchored to the bottom. Like so:

layout

<html>
<body>
<header>
     <h1>Bacon ipsum dolor sit amet salami</h1>

     <h2>ribs tongue cow </h2>

</header>
<article>
    <div class="content">content</div>
    <div class="image">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Rage_Against_The_Machine.jpg/250px-Rage_Against_The_Machine.jpg" />
    </div>
    <div class="clear"></div>
</article>
<footer>
     <h3>read more</h3>

</footer>
</body>
</html>

CSS

body {
    height:100%;
}
article {
    position:relative;
    overflow:hidden;
    height: 100%;
    background-color: grey;
}
header {
    background-color:red;
}
.clear {
    clear:both;
}
footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:blue;
    height:64px;
}
.content {
    position:relative;
    height:100%;
    background-color:pink;
    overflow:hidden;
    max-width : 66%;
    float:left;
}
.image {
    float:left;
    width: 34%;
    position:relative;
    right:0;
}

Requirements:

  1. Content div should stretch the available height between header and footer
  2. Content div should hide overflow of text (no scrollbars). No content should appear beneath footer.
  3. Page should not have scrollbars
  4. Footer should be positioned at the bottom of the page
  5. Header has dynamic height
  6. Image should accompany content on the right side.

From what I know, I cannot stretch the height of a div to the height of it's absolute child, are there any tricks that will allow me to get the desired layout?

My problem: Edit: The default WebView browser on the Samsung Galaxy S3 does not support flexbox, which actually works on Chrome at the moment.

requirements

DEMO: http://jsbin.com/EcUwUbUf/6/edit

Upvotes: 2

Views: 2555

Answers (2)

Zaqx
Zaqx

Reputation: 1442

The problem you're having comes from your use of floats and position absolute. Both of which were never intended for this type of layout and are no longer best practice.

I've rewritten your demo below to use display:inline-block which also wasn't intended for this sort of layout but it is a better solution for this type of problem and is current best practice.

DEMO: http://jsbin.com/efEGukar/4/edit?output

The flexbox set of properties are specifically designed for this sort of layout and are a vastly better solution that will give you more control on how your site reacts to varying screen sizes. However, browsers are still adding support and it's not widespread just yet: see the current list here. This is future best practice, so if you're learning CSS take this approach.

Here is a good explanation of how to use flexbox.

Upvotes: 1

Sudhir Bhojwani
Sudhir Bhojwani

Reputation: 17

I believe you are seeing the scroll bar for content area (even with overflow:hidden). I assume that's the problem. You can solve this by applying overflow:hidden to body. That should avoid the scroll bar.

Upvotes: 0

Related Questions