html - div 不会随着内容的增长而拉伸(stretch)

Question

我有 3 个 div(左面板、中心和页脚)。一切都很好地对齐，但每当中心 div 中的内容增长时，我希望中心 div 拉伸(stretch)以包含它的所有内容。

    <div class="parent">
    <!-- Header starts-->
    <div class="header">
        <div id="logo">
            <!--span class="indent"><img src="img/fdm-logo.png"/><span-->
            <h1 class="indent">
                Trading platform
                <h1>
        </div>
    </div>
    <!-- Header ends-->

    <!-- Left panel starts-->
    <div class="leftPanel">
        <div id='cssmenu'>
            <ul>
                <li class='active'><a>User</a>
                    <ul>
                        <li><a>Add User</a></li>
                        <li><a>Update User</a></li>
                        <li><a>Delete User</a></li>
                        <li><a>Ban User</a></li>
                    </ul>
                </li>
                </li>
                <li><a>View Service Request</a></li>
                <li><a>About us</a></li>
                <li class='last'><a>Log out</a></li>
            </ul>
        </div>
    </div>
    <!-- Left panel ends-->

    <!-- Login panel starts-->
    <div class="contentPanel">
        <div id="form_wrapper" class="form_wrapper">
            <form class="login active" onsubmit="return validateForm()"
                method="post">
                <h3>Add/ Update User</h3>
                <span id="msgError" class="error">This is an error</span> Username:
                <input id="uName" type="text" maxlength="30" /> Password: <input
                    id="pwd" type="password" maxlength="30" /> Confirm Password: <input
                    id="cPwd" type="password" maxlength="30" /> Full Name: <input
                    id="fName" type="text" maxlength="30" /> 
                    Funds: <input id="funds"type="text" maxlength="30" /> 
                    User Role: 
                    <select name="role">
                        <option value="volvo">Share Holder</option>
                        <option value="saab">Broker</option>
                        <option value="fiat">System Admin</option>
                    </select>
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                    Funds: <input id="funds"type="text" maxlength="30" /> User Role: 
                <div class="bottom">
                    <input type="submit" value="Submit"></input>
                    <div class="clear"></div>
                </div>
            </form>
            <div class="clear"></div>
        </div>
    </div>
    <!-- Login panel ends -->

    <!-- Footer starts -->
    <div class="footer clear">
        <p class="indent copyright">
            Copyright &copy; FDM Group 2014<br />
            <br /> By using this site you agree we can set and use cookies<br />
            For details of these cookies and how to disable them, <a
                href="http://www.fdmgroup.com/cookie-policy/">click to read our
                cookie policy</a><br />
        </p>
    </div>
    <!-- Footer ends -->
</div>

我的 FIDDLE 代码: Fiddle

但在我的页面中，出于某种原因，内容显示在中心 div 的外侧。

为什么以及如何解决此问题。任何帮助，将不胜感激。谢谢

Answer 1

您可以用另一个 div 包裹 leftPanel、contentPanel 和 footerPanel，然后将该 div 设置为与您的 leftPanel 具有相同的背景

<div class="mainPanel">

CSS

.mainPanel {
    background-color:#151515;
}

请参阅此处 Fiddle

此外，您的 H1 标签未正确关闭并且您有额外的/li 标签