Question

我有两个Div，左边的是各种侧边栏（但它不会扩展屏幕的整个高度），右边的是内容Div，它应该占据尽可能多的屏幕并折叠/在屏幕缩小时将其移至侧边栏下方。现在，我已经按照期望的方式设置了侧边栏，但是随着页面缩小并且不会向下方移动，Content Div开始与侧边栏重叠。

我尝试了不同的位置：参数（固定，绝对，相对）不同的width / min-width值，以及float的不同值。为了简单起见，我现在拥有html样式中的所有内容。正在使用的css文件似乎在干扰功能，因此我尝试通过直接在HTML中进行样式设置来覆盖它们。

<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div class="SideContainer" style="background-color: green;position:absolute;left:0; top:80; bottom: 400;width: 20vw;min-width: 200px;max-width: 300px;padding: 3px;">

<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div></div>
<div class="ContentContainer" style="background-color: gold;position: relative;float: left;left:20vw; top: 25;width:80%;min-width: 400px;margin-right: 3px;padding: 8px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div></div><body>

内容div应该缩小，并在某个点移至补充工具栏div下方。

Answer 1

<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div style="display: flex; flex-flow: row wrap;">
    <div class="SideContainer" style="background-color: green;left:0; top:80; bottom: 400;width: 20vw;flex-grow: 1;padding: 3px;min-width: 200px;max-width: 300px">

        <div style="background-color: red;width: 100%;">Keys</div>
        <div style="background-color: blue;">Error Box</div>
        <div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
        <p> Enter Display Name</p>
        <div style="background-color: yellow;">Name Box</div>
        <p> Users Viewing </p>
        <div style="background-color: orange;">User box</div>
    </div>
    <div class="ContentContainer" style="background-color: gold;float: left;left:20vw; flex-grow: 4;top: 25;margin-right: 3px;padding: 8px;min-width: 200px;">
        <div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
        <div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div>
    </div>
</div>
<body>

我使用 Display：flex 使您的代码正常工作，将代码分为html和css并在HTML中使用类引用也是个好主意。这样做有很多好处，包括更容易维护，更清洁，以及易于遵循等。

随着屏幕尺寸缩小，将Div设置为移至另一个Div下方

1 个答案: