Question 43203 in Html Question posted in
Some basic documentation can be found here.

Is there a way to display all content without having scroll in the case of varying screen height? – Html

I have a nav bar and 4 graphs on my page as shown in the below image.

enter image description here

My goal is to fit all 4 graphs on the page without displaying scroll in various screen heights. My code looks like below:

<div className="container">
  <div className="graph">
   <Chart /> //graph 1 
   <Chart /> //graph 2
</div>
 <div className="graph">
   <Chart /> //graph 1 
   <Chart /> //graph 2
</div>
</div>

I tried putting 90vh to the container and fix heights to the <Chart /> components.

Tags:

2

Answers


  1. 0

    Is this what you are looking for?

    :root {
  --header-height: 45px;
}

html, body {
  height: 100%;
  min-height: 100%;
}

body { padding:0; margin: 0 }

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background-color: red;
}

#container {
  position: fixed;
  top:  var(--header-height);
  left: 0; bottom: 0; right: 0;
}

.chart {
  position: absolute;
}

.chart.topLeft {
    left: 0; right: 50%;
    top: 0; bottom: 50%;
    background-color: blue;
}
.chart.topRight {
    left: 50%; right: 0;
    top: 0; bottom: 50%;
    background-color: green;
}
.chart.bottomLeft {
    left: 0; right: 50%;
    top: 50%; bottom: 0;
    background-color: yellow;
}

.chart.bottomRight {
    left: 50%; right: 0;
    top: 50%; bottom: 0;
    background-color: orange;
}
    <html>
  <body>
    <div id="header">
    </div>
    <div id="container">
      <div class="chart topLeft"></div>
      <div class="chart topRight"></div>
      <div class="chart bottomLeft"></div>
      <div class="chart bottomRight"></div>
    </div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    As I get your question, you need a way to change the ratio based on a given height.

    The known way to change the ratio based on a given width (for example => 50%) is to set padding-bottom or padding-top in percentage

    .some-container {
  width: 50%;
  padding-bottom: 28.125%; // if wanted ratio is 16:9
}

    The other way for changing the ratio based on a given height (% or vh) is a bit tricky using something extra other than css which is an image with the wanted ratio to hold the parent-container then the changing-ratio component(child) would be positioned absolute above the parent-container with width and height 100%, to change with the parent, see the below snippet =>

    body {
  margin: 0;
}

.navbar {
  background-color: red;
  height: 30px;
}

.containers-wrapper {
  height: calc(100vh - 30px);
  background-color: blue;
}

.two {
  height: 50%;
  display: flex;
  justify-content: space-around;
}

.parent-container {
  height: 100%;
  position: relative;
}

.parent-container img {
  display: block;
  height: 100%;
  width: auto;
}

.child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
  opacity: 0.5;
}
    <div class="navbar">nav bar</div>

<div class="containers-wrapper">
  <div class="two">
    <div class="parent-container">
      <img src="https://fakeimg.pl/160x90/">
      <div class="child"></div>
    </div>
    
    <div class="parent-container">
      <img src="https://fakeimg.pl/160x90/">
      <div class="child"></div>
    </div>
  </div>
  
  
  <div class="two">
    <div class="parent-container">
      <img src="https://fakeimg.pl/160x90/">
      <div class="child"></div>
    </div>
    
    <div class="parent-container">
      <img src="https://fakeimg.pl/160x90/">
      <div class="child"></div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search