Search code examples
htmlcsssidebar

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

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. Img3

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

Img1

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.

Img2

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

Img4

Regards

Solution

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