CSS

Question

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

问题是如果我删除 width: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 标签上

此致

Answer 1

试试这个代码



<!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>

Answer 2

我认为您正在尝试的设计是完全错误的方法。您需要做的是创建一个汉堡包图标，它可以滑动 .left-bar，但在其他情况下保持隐藏。鉴于，我不知道 .top-bar 或 .left-bar 的用途。

您应该养成总是创建类的习惯。我删除了您的评论，并将 div 命名为类。

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

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

我对计算 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>

Answer 3

感谢@Rickard Elimaa 我让它工作了。 我仍在使用 position: fixed，用于 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>

CSS - 如何将 div 放在左侧边栏的右侧并在 window 调整大小时调整它的大小

CSS - How to fit div at the right side of a left sidebar and resize it on window resize

html

sidebar