html - Equalize the height of left and right div, prevent right div from going below left div

Question

Welcome To Ask or Share your Answers For Others

html - Equalize the height of left and right div, prevent right div from going below left div

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Equalize the height of left and right div, prevent right div from going below left div

I have a HTML page with content divided into left and right part using CSS. The height of left content in smaller than the right content. Hence the right content div goes below to the left content div also. Eventually the border of right content is not a straight line.

How can we avoid the creeping of the right content towards the left?
How can we make the height of left content increased till the height of right content (with javascript)?

enter image description here

<html>

<head>
    <title>My Page</title>
    <style type="text/css">
        .myContent {
            width: 100%;
        }

        .myHeader {
        }

        .leftPart {
            border: 1px solid blue;
            width: 200px;
            clear: left;
            float: left;
            background-color: red;
        }

        .rightPart {
            border: 1px solid orange;
            width: 100%;
            background-color: beige;
        }
    </style>
</head>

<body>

    <header>
        <div class="myHeader">
            H
        </div>
    </header>

    <div id="body">
        <div class="myContent">

            <div class="leftPart">
                A
            </div>
            <div class="rightPart">
                <div >
                    <label for="Sales_and_Marketing">Sales and Marketing</label>
                    <input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
                </div>
                 <div >
                    <label for="Sales_and_Marketing">Sales and Marketing</label>
                    <input id="Text1" name="SalesAndMarketing" type="text" value="" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:08:41+0000

fLoat one element, set margin to the other one.

.leftPart {
    border: 1px solid blue;
    width: 200px;
    float: left;
    background-color: red;
}

.rightPart {
    margin-left: 200px;
    border: 1px solid orange;
    background-color: beige;
}

JSBin Demo

Update #1

If you consider using JavaScript, you might want to take a look at equalize.js.

equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.

Here is an example:

// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});

Here is the JSBin Demo.

Update #2

If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.

But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):

#body { display: table; width: 100%; }

.myContent { display: table-row; }

.leftPart {
  width: 200px;
  display: table-cell;
}

.rightPart {
  display: table-cell;
}

Here is the JSBin Demo

Categories

html - Equalize the height of left and right div, prevent right div from going below left div

html - Equalize the height of left and right div, prevent right div from going below left div

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Update #1

Update #2

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags