CODEWITHSUNDEEP
css
CL So
CL So

Reputation: 3759

How to make the parent height wrap the content height?

I wrote this css example, it works fine if the content is not much in number

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        html{
            height:100%;
            margin:0px;
        }
        body{
            height:100%;
            margin:0px;
        }
        div{
            height:100%;
            margin:0px;
            background-color:red;
            width:100%;
        }
        </style>
    </head>
    <body>

        <div>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
        </div>

    </body>
</html>

enter image description here

But my example fails as soon as you add more content

<div>
   <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
   <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
   <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>

enter image description here

How do I write some css to wrap the content when the content is in a greater number?

Upvotes: 0

Views: 1477

Answers (2)

Kravimir
Kravimir

Reputation: 690

Fixed widths and fixed heights don't work for modern responsive layouts. If you provide us with more specific information on the widths of the columns in percentages of the viewport width, I will update this answer with a tried-and-true approach to equal height columns.

Upvotes: 0

weegee
weegee

Reputation: 3399

When you make your html's height 100%, it will scale the body tag to the 100%, limiting the div's height ultimately, to work around this problem, you have two approaches.

Approach 1

Apply height 100% only to the body tag

body {
  height: 100%;
  overflow: auto;
  margin: 0px;
}

div {
  height: 100%;
  background-color: red;
  width: 100%;
}
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        
        </style>
    </head>
    <body>

        <div>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
        </div>

    </body>
</html>

Approach 2

Add overflow:auto to your div to make it's overflow automatic and based on the content, like

body,html {
  height: 100%;
  overflow: auto;
  margin: 0px;
}

div {
  height: 100%;
  overflow:auto;
  background-color: red;
  width: 100%;
}
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        
        </style>
    </head>
    <body>

        <div>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
        </div>

    </body>
</html>

Upvotes: 2

Related Questions