CSS - 如何在左侧边栏的右侧放置 div 并在窗口调整大小时调整它的大小答案

【问题标题】：CSS - How to fit div at the right side of a left sidebar and resize it on window resizeCSS - 如何在左侧边栏的右侧放置 div 并在窗口调整大小时调整它的大小
【发布时间】：2021-05-01 23:55:21
【问题描述】：

我正在尝试在左侧栏旁边的中间制作内容容器，但无法让它在窗口调整大小时正确调整大小，并且仍然让整个内容容器不会超出窗口的视图。

https://jsfiddle.net/ptm7f6cL/

问题是如果我删除宽度：calc(100% - 200px);从 APP - 调整大小的 div 会丢失右侧的一部分并且不可见。

如果我使用 width:calc(100% - 200px);

就可以了

但是当我调整它的大小时，会有这样的差距： 如何去除绿色间隙并仍然让容器正确调整大小而不会丢失右侧的 200px。

<!DOCTYPE html>
<html lang="en" style="padding: 0; position:fixed; left: 0; margin: 0; top: 0; width: 100%; height: 100%; background-color: purple;">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="padding: 0; left: 0; margin: 0; top: 0;  width: 100%;  min-width: 100%; height: 100%; background-color: lime;">

  <!--Wrapper-->
  <div style="  width: 100%; height: 100%; display: inline-flex;">

    <!--LEFTBAR-->
    <div style="max-width: 200px; min-width: 200px; width: inherit; box-sizing: border-box;  height: inherit; max-height:100%; padding: 10px; left:0; top: 0; background-color:green;">
      <h1>sadsdsadsad</h1>
    </div>



    <!--Wrapper 2-->
    <div style="width: 100%; height: 100%; box-sizing: border-box;  ">

      <!--TOPBAR-->
      <div style="display: inline-flex; width: 100%; height: 50px; padding: 10px; right:0; bottom: 0; background-color: sandybrown;">
        <h1> adfgggggghhhhjjjjjjjjkkkkkkkllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</h1>
        <h1> ad</h1>
        <h1> ad</h1>
        <h1> ad</h1>
        <h1> ad</h1>
        <h1> ad</h1>
      </div>


      <!--APP-->
      <div style=" width:calc(100% - 200px); max-width: 100%; height:calc(100% - 70px); box-sizing: border-box; display: flex; padding: 10px; right:0; bottom: 0; background-color:aqua;">
        <iframe style="box-sizing: border-box; width: 100%; height:100%;" src="https://iconarchive.com/"></iframe>
      </div>

      <!-- Wrapper 3 Right Right -->
      <!-- <div style="float: right; height:calc(100% - 70px); background-color:red;"> -->


    </div>


    <!-- Wrapper-Right 3 -->
    <!-- <div style="position: relative; width:10px; height: 100%; background-color: orange;"></div> -->

  </div>


</body>

</html>

无位置：固定；在 Html 标签上

问候

【问题讨论】：

你的 APP div 有width:calc(100% - 200px); -> 所以你在右边有 200px 的空间。您的并发 DIV 是 LEFTBAR 和 Wrapper 2 -> 检查它们的大小和位置。
问题是如果我删除宽度：calc(100% - 200px);从 APP - 调整大小的 div 会丢失右侧的一部分并且不可见。
为什么你的位置：固定在你的 HTML 标签上？
你为什么不使用类？
我没有使用类，因为我正在测试它知道。位置：固定；在 html 上是因为在调整大小时它变得比屏幕小。我正在使用 chrome 上的开发工具对其进行测试，但针对的是移动版本。

标签： html css sidebar

【解决方案1】：

我认为您正在尝试的设计是完全错误的方式。您需要创建一个汉堡包图标，该图标可以滑动.left-bar，否则将其隐藏。鉴于此，我不知道 .top-bar 或 .left-bar 的用途。

您应该养成始终创建类的习惯。我删除了你的 cmets，并用它的类命名了 div。

页面上的h1标签不应超过一个，因为搜索引擎会使用它来对您的页面进行分类。

我认为这个 CSS 的关键点是在 .top-bar 元素中添加 overflow: hidden，因为它的子元素会破坏页面的整个结构。

我对计算 iframe 高度的解决方案不满意 (.app)。或许可以通过一些巧妙的 flex 属性来实现同样的效果。

* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: purple;
}

body {
  background-color: lime;
}

.wrapper-1 {
  height: 100%;
  display: flex;
}

.wrapper-2 {
  overflow: hidden;
}

.top-bar {
  height: 50px;
  max-width: 100%;
  overflow: hidden;
  background-color: sandybrown;
}

.app,
.top-bar, 
.left-bar {
  padding: 10px;
}

.left-bar > h1,
.top-bar > h1
{
  margin: 0px;
}

.app {
  height: calc(100% - 50px);
  width: 100%;
  background-color: aqua;
}

<div class="wrapper-1">
  <div class="left-bar">
    <h1>sadsdsadsad</h1>
  </div>

  <div class="wrapper-2">

    <div class="top-bar">
      <h1> adfgggggghhhhjjjjjjjjkkkkkkkllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</h1>
      <h1> ad</h1>
      <h1> ad</h1>
      <h1> ad</h1>
      <h1> ad</h1>
      <h1> ad</h1>
    </div>

    <iframe class="app" src="https://iconarchive.com/"></iframe>
    
  </div>
</div>

【讨论】：

感谢您的回答：我的显示器是 2560x1080 并且应用 iframe 的右侧仍然有绿色区域我添加了 width: 100% 到包装器 div，现在它可以工作了。另一个问题是使用开发工具移动模拟调整大小的 html 元素表现得很奇怪，我添加了 position: fixed;再次到 html。我不知道是否有更好的方法来实现这一点，而不使用 position: fixed;对于 html 标签。但它现在可以工作了，再次感谢您。

【解决方案2】：

试试这个代码



<!DOCTYPE html>
<html lang="en"
    style="padding: 0; position:fixed; left: 0; margin: 0; top: 0; width: 100%; height: 100%; background-color: purple;">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body
    style="padding: 0; left: 0; margin: 0; top: 0;  width: 100%;  min-width: 100%; height: 100%; background-color: lime;">

    <!--Wrapper-->
    <div style="  width: 100%; height: 100%; display: inline-flex;">

        <!--LEFTBAR-->
        <div
            style="max-width: 200px; min-width: 200px; width: inherit; box-sizing: border-box;  height: inherit; max-height:100%; padding: 10px; left:0; top: 0; background-color:green;">
            <h1>sadsdsadsad</h1>
        </div>



        <!--Wrapper 2-->
        <div style="width: 100%; height: 100%; box-sizing: border-box;  ">

            <!--TOPBAR-->
            <div
                style="display: inline-flex; width: 100%; height: 50px; padding: 10px; right:0; bottom: 0; background-color: sandybrown;">
                <h1> adfgggggghhhhjjjjjjjjkkkkkkkllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</h1><h1> ad</h1><h1> ad</h1><h1> ad</h1><h1> ad</h1><h1> ad</h1>
            </div>


            <!--APP-->
            <div style="max-width: 100%; height:calc(100% - 70px); box-sizing: border-box; display: flex; padding: 10px; right:0; bottom: 0; background-color:aqua;">
                <iframe style="box-sizing: border-box; width: 100%; height:100%;" src="https://iconarchive.com/"></iframe> 
            </div>
            
                    <!-- Wrapper 3 Right Right -->
                    <!-- <div style="float: right; height:calc(100% - 70px); background-color:red;"> -->
         
                     
        </div>


        <!-- Wrapper-Right 3 -->
        <!-- <div style="position: relative; width:10px; height: 100%; background-color: orange;"></div> -->

    </div>


</body>

</html>

【讨论】：

问题是在调整大小时它会丢失右侧的一部分。
"[尝试]此代码" - 为什么？你有什么改变，你有什么改进？怎么样？
他替换了 width:calc(100% - 200px);宽度：100%;
没有。只需删除宽度属性。你想响应这个项目吗？

【解决方案3】：

感谢@Rickard Elimaa，我得到了它的工作。 我仍在使用位置：固定，用于 html 标记，但我不知道该怎么做，因此 html 元素在使用开发工具中的移动模拟调整大小时不会变得奇怪。

似乎解决问题的部分只是将overflow: hidden; 添加到包装器2。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: purple;
}

html{
  position: fixed;
}


body {
  background-color: lime;
}

.wrapper-1 {
  height: 100%;
  display: flex;
}

.wrapper-2 {
  overflow: hidden;
  width: 100%;
}

.top-bar {
  height: 50px;
  max-width: 100%;
  overflow: hidden;
  background-color: sandybrown;
}


.left-bar {
  background-color: red;
  min-width: 50px;
  max-width: 200px;
}


.app,
.top-bar, 
.left-bar {
  padding: 10px;
}

.left-bar > h1,
.top-bar > h1
{
  margin: 0px;
}

.app {
  height: calc(100% - 50px);
  width: 100%;
  background-color: aqua;
}
    </style>
</head>
<body>
    

    <div class="wrapper-1">
        <div class="left-bar">
          <h1>sadsdsadsad</h1>
        </div>
      
        <div class="wrapper-2">
      
          <div class="top-bar">
            <h1> adfgggggghhhhjjjjjjjjkkkkkkkllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</h1>
            <h1> ad</h1>
            <h1> ad</h1>
            <h1> ad</h1>
            <h1> ad</h1>
            <h1> ad</h1>
          </div>
      
          <iframe class="app" src="https://iconarchive.com/"></iframe>
          
        </div>
      </div>
      



</body>
</html>

【讨论】：