Question

我的div标签有问题，当我调整窗口大小时，我的侧边栏和内容会显示在我的标题下。

When the window is resized to a smaller size

这是我的CSS代码：

    .header {
        height: 15%;
        width:100%;
        margin-bottom:0px;
        padding-bottom:0px;
    }

    .sidebar {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        height: 85%;
        float: left;
        width: 15%;
    }

    .content {
        float: right;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        height: 85%;
        width: 85%;
        text-align: center;
    }

我也使用容器来包装页面内容：

    .container {
        margin: 0px 0px 0px 0px;
        height: 100%;
        width: 100%;
    }

Answer 1

将position: relative;放在侧栏和内容上：

.sidebar {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        height: 85%;
        float: left;
        width: 15%;
        position: relative;
    }

.content {
    float: right;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    height: 85%;
    width: 85%;
    text-align: center;
    position: relative;
}

Answer 2

你不应该使用float来制作布局，这样做并没有意义，并且让你遇到这样的问题。 Float用于将块元素放置在如下文本中：

您只需使用position: absolute;

即可解决此问题

     .header {
            position: absolute;
            top: 0;
            left: 0;
    
            height: 15%;
            width:100%;
            margin-bottom:0px;
            padding-bottom:0px;
            background: red;
            color: white;
        }
    
        .sidebar {
            position: absolute;
            left: 0;
            top: 15vh;
           
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            height: 85vh;
            width: 15vw;
          
            background: orange;
            color: white;

        }
    
        .content {
            position: absolute;
            top: 15vh;
            left: 15vw;
            right: 0;
            bottom: 0; 
            
            padding: 0;
            margin: 0;
            text-align: center;
        }

<div class="header">
  This is the header
</div>

<div class="sidebar">
  This is the sidebar
</div>

<div class="content">
  This is the content
</div>

HTML div标签相互重叠

2 个答案: