检查JSFiddle

Question

我有以下HTML代码，它是屏幕截图中的“红色”框：

<div style="position: absolute; width: 100%; height: 100%; overflow: auto;">
    <div style="position: relative; left: 295px; top: 43px; height: 89%; width: 76%; background-color: #FF0000; overflow: auto;">
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        HERE IT IS<br>
        <span style="float: right;">TEST</span>
    </div>
</div>

以下是完整桌面视图的屏幕截图（您可以在右下角看到**TEST**文字）：

enter image description here

当我恢复窗口并且它变得有点小时，它看起来像这样:(不能看到**TEST**文本而且没有滚动条）：

enter image description here

作为一项测试，我查看了一个移动浏览器，它看起来像这样：

enter image description here

我感到困惑的是如何制作红色框，以便如果内容超出屏幕的底部，则有一个垂直滚动条，如果内容超出屏幕向右，则有一个水平滚动条，如果底部和右侧，应该有两个滚动条。我如何实现这一目标？

以下是左侧导航的代码：

#leftNav {
    width: 275px;
    height: 412px;
    position: fixed;
    left: 10px;
    top: 42px;
    z-index: 2;
    background: url('../theImages/bg_80_b.png');
    text-align: left;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

Answer 1

关于我的评论：你必须进行流畅的布局。

如果需要流畅的布局，则必须避免使用％作为宽度。换句话说，如果您希望右列能够根据浏览器大小调整其自身大小，则必须删除任何width属性。

我没有完整的代码，所以我做了一个简单的流畅布局

检查JSFiddle

检查JSFiddle (Updated)

注意事项：

左列设置为固定宽度并浮动到左侧

#left {
    width: 200px;
    float: left;
}

右列没有宽度但是有一个左边距将其向右推，因此它位于左栏的旁边
```
#right {
    margin-left:205px;
}
```
清除浮动：用于删除对任何元素的任何浮动效果。尝试“删除”<div class="clear"></div>进行实验，看看发生了什么，比解释更容易

如何调整DIV大小以匹配屏幕大小：

1 个答案:

检查JSFiddle

检查JSFiddle (Updated)