CODEWITHSUNDEEP
html
Mercenary
Mercenary

Reputation: 2176

The height of the div does not grow dynamically

I went through most of the posts on this but nothing helped.

I need to increase the div to 100% height so that it fits the length of the window and applicable to child divs too.

#container{
    width: 75%; 
    background-color: silver; 
    background-position: center;
    min-height: 100px;
    overflow : hidden;
    margin: 0 auto;
}

#header{
    background-color:infotext;
}

h1{
    margin-bottom: 0; 
    color: white;
}

#list{
    width: 20%; 
    background-color:window; 
    float: left;
    height:100%;
}
#links{
    width: 55%;
}

Code:

<body>
    <div id="container">
        <div id="header">
            <h1 align="center">Represent</h1>
        </div>
        <div id="list">
            <span><h4>Fruits</h4></span>
            <hr>
            <p>Apple</p><br>
            <p>Mango</p><br>
            <p>Orange</p>
        </div >
        <div id="links">
        <iframe src="http://www.google.co.in" frameborder="0">
        </iframe>
        </div>
    </div>
</body>

The issue is that the container div and the rest of the divs does not expand even if the iframe size is big and hence, scrollbar appears. Any solutions?

Another issue:

The div of the iframe does not take up the full width. I put 20% for #list and 55% for #links so that it fits within the parent div #container 75%. This does not happen!!

Upvotes: 0

Views: 1230

Answers (1)

Web_Designer
Web_Designer

Reputation: 74650

You have to set height: 100%; on the <html> and <body> elements as well as the child elements that you want to occupy the full height:

Add this CSS:

html, body, .full-height {
    height: 100%;
}

body {
    margin: 0; // <-- to avoid unnecessary scrollbars.
}

Then just add the full-height class to the elements you want to occupy the full height of their container.


You need to provide a demo of your issue or I can't help you with all of your problems.

A few tips though:

  1. Don't use the align attribute. It's deprecated. Use CSS floats instead.

  2. Don't use the infotext or window CSS color values. Those are system colors. All system colors are deprecated as they only work in certain OS / browser combinations. Use one of the valid color keywords, or use hexadecimal / rgb notation.

  3. Don't use <br> tags for visual spacing. Use CSS margin instead.

  4. Don't stick block-level elements like <h4>s inside inline elements like <span>s.

  5. There are very few cases where using an iframe is a good idea. Try rethinking your problem to see if you can come up with an alternative solution.

  6. Make your #header element an actual <header> element. To support IE8- add the JS snippet at the bottom of this answer to your JS.

  7. Make your #list element an actual list element (<ul>). If you don't like the default styles of a list then reset them using the CSS snippet at the bottom of this answer.


JS snippet:

document.createElement('header');


CSS snippet:

ul.reset,
ol.reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

Upvotes: 2

Related Questions