Question

我有一个非常常见的网站布局：一个单独的标题div，它跨越它下面的两个其他div（或列）。一列用于主页面内容，另一列用于右侧导航菜单。见下文：

+-----------------------------+
|   Header                    |
+-----------------------------+
|                       |     |
|   Page Content        | Nav |
|                       |     |
|                       |     |
|                       |     |
|                       +-----|
|                       |     |
------------------------------|

我的网站设置为浏览器总宽度的80％，因此在调整浏览器大小时，只应调整主页面内容列的大小（即侧面导航栏始终为固定数字）像素）。

我的问题是指当页面内容列包含无法缩小到div的 min-width 值的元素时（例如图像）然后页面内容 div停止缩小（如预期的那样），但标题和 Nav div在其后面不断缩小。

我在这里创建了一个工作示例：http://jsfiddle.net/hzBvw/4/

有谁能告诉我我能做什么使用CSS2 让父div停止缩小页面内容？从表面上看，我只是想在这里模仿表行为。

Answer 1

这样可行（您需要修改css，使其与原始设计完全匹配）。请参阅此修订后的小提琴：http://jsfiddle.net/hzBvw/8/

我将标题移动到表格结构中。

当表变小时，但内部的大图形元素会强制列保持更宽，正如您所见，表格周围的灰色边框继续缩小。

因此，我在td元素内部的三个元素（标题，内容，侧边栏）周围创建了单独的包装器，并在这些包装器中使用css来维护边框。

希望它有所帮助！

微米（mKm）

HTML：

<div class="main-body-container">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" style="vertical-align: top; width: 100%;">
                <div class="header-wrapper">

                    <div class="header">
                        <b>Header</b>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top; width: 100%;">
                <div class="content-wrapper">
                    <div class="content">
                        <b>Content Area</b><br/>
                        <br/>
                        <img src="http://www.google.com.au/images/srpr/logo3w.png" style="width: 400px;"/><br/>
                        <br/>
                        Resize the browser window and note how the grey background and orange header divs shrink behind
                        the navigation and content area divs.
                    </div>
                </div>
            </td>
            <td style="vertical-align: top; background-color: lightgrey">
                <div class="sidebar-wrapper">
                    <div class="right-sidebar">
                        <b>Navigation Area</b>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

CSS：

.main-body-container
{
    //background-color: lightgrey;
    margin: 0px auto;
    max-width: 800px;
    min-width: 400px;
    //padding: 10px;
    width: 80%;
    font: 9pt Verdana;
}

.header-wrapper, .content-wrapper, .sidebar-wrapper {
    background-color: lightgrey;
padding: 10px;
}
.header
{
    background-color: orange;
    padding: 10px;
}

.content
{
    background-color: white;
    padding: 10px;
}

.right-sidebar
{
    background-color: red;
    padding: 10px;
    width: 160px;
}

CSS：防止父div在浏览器调整大小时缩小其子div

1 个答案: