Question

我有3个div（左侧面板，中间和页脚）。一切都很好地对齐，但每当中心div中的内容增长时，我希望中心div能够包含所有内容。

    <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

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

screen shot

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

Answer 1

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

<div class="mainPanel">

CSS

.mainPanel {
    background-color:#151515;
}

请参阅此处Fiddle

你的H1标签也没有正确关闭，你有和额外/ li标签

Answer 2

您可以使用height属性，而不是对contentPanel类使用min-height属性。 FIDDLE

.contentPanel {
    /*height:70%;*/
    min-height:70%;
    float:left;
    position:relative;
    width:75%;
}

希望这能解决您的问题。

Answer 3

我已将你的小提琴修改为get solution

我创建了一个包装器div，它应该包含左面板和contentpanel

HTML：

<div class="wrapper">
   <div class="leftPanel">
   </div>

   <div class="contentPanel">
   </div>
</div>

CSS：

.wrapper {
   display:table;
}

.contentPanel {
   display:table-cell;
}

.leftPanel {
    display:table-cell;
}

Answer 4

尝试将左侧面板和中心放在一个div中。类似于包装器。

Answer 5

您需要设置位置：绝对，宽度：自动＆amp; div的 height：auto 。

.parent{
    position:absolute;
    width: auto;
    height: auto;
}

Answer 6

不要为Content Div使用固定高度 .contentPanel { 向左飘浮; / 身高：70％; / 位置：相对; 宽度：75％; }

Answer 7

只需将其放入另一个<div>

即可

<div> ***ADD THIS****
        <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>
</div>

随着内容的增长，div并没有延伸

7 个答案: