stackoom
  简体   繁体   中英

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

 原文  2021-05-01 13:41:08  9   3    html/ css/ sidebar

Question

I am trying to make content container in the middle beside the left bar but cant get it to resize properly on window resize and still have the whole content container not going outside of the view of the window.

https://jsfiddle.net/ptm7f6cL/

The problem is if I remove the width:calc(100% - 200px); from the APP - div on resize it will loose part of the right side and it wont be visible. 图3

This is ok if I use width:calc(100% - 200px);

图1

But when I resize it there is this gap: How to remove the green gap and still have the container to resize properly without loosing the 200px on the right side.

图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=" 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>

Without position: fixed; on the Html tag

图4

Regards

3 answers

solution1
 1 ACCPTED  2021-05-01 15:00:23

I think that the design that you're trying is totally the wrong way to go. What you need is to create a hamburger icon that slides the .left-bar , but otherwise keep it hidden. Given, I don't know what either the .top-bar or .left-bar is for.

You should make it a habit of always creating classes. I removed your comments, and named the divs by it's classes instead.

You should never have more than one h1 tag on the page, because search engines use that to categorize your page.

I think the key point in this CSS is to add overflow: hidden to the .top-bar element, because it's children is messing up the whole structure of the page.

I'm not satisfied with the solution of calculating the height of the iframe ( .app ). Could probably achieve the same thing with some clever flex attributes instead. 

 * { 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>

solution2
 0  2021-05-01 13:58:14

try this code



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

solution3
 0  2021-05-01 15:44:48

Thanks to @Rickard Elimaa I got it working. I am still using position: fixed, for the html tag but I dont know otherwise how to do it so the html element does not get strange size on resize with the mobile simulation in the dev tools.

It seams that the part that fixed the problem was just adding overflow: hidden; to the wrapper 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question css/JavaScript resize div content to fit window Resize div right to left How to resize the image and fit into container (div) in css CSS: How to resize the right side element only? How to resize a div on window resize? How to set side bar between two div and it should fit in the any browser window based on resize Text inside div moves right or left when resize window Div that stays centered on window resize and overflows to both the left and right How can I resize a left side div on its right side only, and it's neighboring right side div, on its left side only, using jqueryui? CSS <p> width on percentage online shrinks on window resize (left - right)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM