Html 创建具有两个内部分区的分区。背景/内容必须“跟随”_Html_Background_Height

Html 创建具有两个内部分区的分区。背景/内容必须“跟随”

html

Html 创建具有两个内部分区的分区。背景/内容必须“跟随”,html,background,height,Html,Background,Height,我怎么能这样做： [第1组] [部门-2] 侧菜单内2 [/DIV-2] [部门-3] 主要内容3 [/DIV-3] [/DIV-1] 所以，假设div3的内容非常长，比div2的内容长得多我怎样才能做到呢？2区的背景和边框等都跟在3区的高度后面目前，我已经尝试使用980.css网格，尽管它不起作用这就是我现在拥有的： <div class="column grid_12"> <div class="column grid

我怎么能这样做：

[第1组]

[部门-2] 侧菜单内2 [/DIV-2]

[部门-3] 主要内容3 [/DIV-3]

[/DIV-1]

所以，假设div3的内容非常长，比div2的内容长得多

我怎样才能做到呢？2区的背景和边框等都跟在3区的高度后面

目前，我已经尝试使用980.css网格，尽管它不起作用

这就是我现在拥有的：

        <div class="column grid_12">

                <div class="column grid_3" style="background-color:gray;">
                MENU!
                </div>
                <div class="column grid_8" style="background-color:black;">
                CONTENT!    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            </div>

        </div>




</div><!-- End Row -->

最亲切的问候

也许您可以使用JavaScript将DIV2的高度设置为DIV3的高度

比如：

如果第二列总是比第一列长，则可以使用以下示例：

<html>
<head>

    <style>
        .container {overflow:hidden; position:relative;}
        .col1 {position:absolute; width:200px; height:100%; top:0px; left:0px; background:#ffbebe;}
        .col2 {width:400px; margin:0px 0px 0px 200px; background:#ffff00;}
    </style>

</head>

<body>

    <div class="container">

        <div class="col1" >
           MENU!<br />
        </div>

        <div class="col2" >
            CONTENT!<br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

    </div>

</body>
</html>

你最好也是最容易的选择就是使用。

就个人而言，我喜欢www.ejeliot.com上的等高栏

我在JSFIDLE上建立了一个示例-

将容器的溢出设置为隐藏，然后在每个div上添加负边距底部和相等的正填充底部

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
   <div>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
   </div>
</div>

人造列也很好，可能更容易设置，但如果你真的坚决反对使用图像，这是一个相当好的方法

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
   <div>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
   </div>
</div>