CSS layout--left adaptive parent element height

CSS Layout--left adaptive parent element height

Ordinary items often encountered in the left navigation menu height is not fixed, need to be with the parent element or the right element, such as high situation, before the self-righteous use of JS to set, not only inconvenient will also appear a variety of bugs, and then suddenly thought of a good method. It is possible that this method has been used by others to rot, but still here caught dead share, hope and everyone to explore the study.

First See Example: Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6

            
                <div class= "Parent" >
                    <div class= "left" >
                        <ul>
                            <li> menu 1</li>
                            <li > Menu 2</li>
                            <li> menu 3</li>
                            <li> menu 4</li>
                            <li> menu 5</li>
                            <li> menu 6</li>
                        </ul>
                    </div>
                    <div class= "right" >
                        <textarea ></textarea>
                    </div>
                </div>
            
        

This example looks like a simple left and right layout, but because there is a background color on the left, it needs to be as high as the parent element, so it's a little different. The textarea here only uses it resize to change the height of the container, no other use.

This may have previously been written, setting the background of the parent element to light gray, the child elements floating around, and the background of the right element being white. However, because there is no spacing between the left and right elements, scaling may be wrapped in some browsers.

My method here is to leave the left element to absolute position (Position:absolute), parent element parent relative to position (position:relative), and set the padding-left:left width for the parent element, Then leave the left height height:100%, so that the leftmost element will change from the height to the parent element. It is best to set a min-height for the right element or the parent element again, because the left absolute position does not open the parent element.

Of course, this method is also flawed, if the height of the left element will vary greatly, such as having a hidden level two menu can be expanded, it is possible to exceed the parent element display. We hope that we can choose the right method for the situation, and also hope to make suggestions for improvement.