Add height to css-CodePudding

I'm trying to add height to original value in CSS. But so far I had no luck.

        html,
        body {
            width: 100%;
            height: 100vh;
            margin: 0px 0px 0px 0px;
            overflow: hidden;
            background-color: #FFF;
        }

#Header1 {
  background-color: green;
  width: 100vw;
  height: 10vh;
  margin-bottom: 0%;
  z-index: 100;
}

#Header2 {
  background-color: blue;
  width: 100%;
  height: 4vh;
  margin-bottom: 0%;
  z-index: 100;
}

#Main {
  height: 82vh;
  width: 100%;
}

if (Header1Check == 1) {
  document.getElementById("Header1").style.display = "block";
} else {
  document.getElementById("Header1").style.display = "none";
  document.querySelector('#Main').style.height = "initial"   "10vh";
}
if (Header2Check == 1) {
  document.getElementById("Header2").style.display = "block";
} else {
  document.getElementById("Header2").style.display = "none";
  document.querySelector('#Main').style.height = "initial"   "4vh";
}

Basicly if the check = 0 it stops showing HEADER1/Header2, but the Main content (center) does not auto size to this.
To counteract this I just tried to add that value to the CSS but it does not appear to work.
Is there a way to achieve this?

edit:

<body>
    <div id="wrapper">
        <div id="Header1">
        </div>
        <div id="Header2">
        </div>
        <div id="portraitContent">
        </div>
        <div id="landscapeContent">
        </div>
        <div id="Footer">
        </div>
    </div>
</body>

CodePudding user response：

You can use display:flex on the #wrapper element, and then set the content divs with flex:1 which means they will take up the remaining space

(see more about flexbox at: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

Something like

*{box-sizing:border-box;}
html,
body {
  width: 100%;
  height: 100vh;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  background-color: #FFF;
}

#wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#wrapper > * {
  border: 1px solid black;
}

#Header1 {
  background-color: green;
  height: 10vh;
  z-index: 100;
}

#Header2 {
  background-color: blue;
  height: 4vh;
}

#Footer {
  background-color: tomato;
  height: 4vh;
}

#portraitContent,
#landscapeContent {
  flex: 1;
  background: teal;
}

@media (orientation: landscape) {
  #portraitContent {
    display: none
  }
}

@media (orientation: portrait) {
  #landscapeContent {
    display: none
  }
}

<div id="wrapper">
  <div id="Header1"> header 1
  </div>
  <div id="Header2">header 2
  </div>
  <div id="portraitContent">
    portrait
  </div>
  <div id="landscapeContent">
    landscape
  </div>
  <div id="Footer">footer
  </div>
</div>

CodePudding user response：

Assuming you want to change size of an image for example you can do this simple example below

Also the property you added for height is incorrect syntax

The correct property values are from https://www.w3schools.com/jsref/prop_style_height.asp

Property Values
Value   Description
auto    The browser sets the height. This is default
length  Defines the height in length units
%   Defines the height in % of the parent element
initial     Sets this property to its default value. Read about initial
inherit     Inherits this property from its parent element. Read about inherit

@HaoWu comment is correct you cannot use both properties together either or you can assign another

//Syntax : object.style.height("")

appImg.style.height = "inital";

Refernces prop style height w3schools js-conventions w3schools

I have prepared a simple Example answer for your question .

const appImg = document.getElementById("appImg");

//console.log(appImg);


function minimizeImage(){
 const hideImgBtn = document.getElementById("hideImgBtn");
if(!hideImgBtn){
 appImg.style.display = "block";
 }else {
appImg.style.height = "10vh";
};

};

.app__img{
max-width: 10vw;
max-height: 150px;
width: 100%;
height: 100%;

}

<div>
<img

src ="https://images.pexels.com/photos/12999041/pexels-photo-12999041.jpeg?auto=compress&cs=tinysrgb&w=300&lazy=load"  id="appImg" alt="appImage"/>
</div>
 
<button onclick="minimizeImage()" id="hideImgBtn">
Min image size with js
</button>

CodePudding user response：

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  background-color: #FFF;
}

#wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#wrapper > * {
  border: 1px solid black;
}

#Header1 {
  background-color: green;
  height: 10vh;
  z-index: 100;
}

#Header2 {
  background-color: blue;
  height: 4vh;
}

#Footer {
  background-color: tomato;
  height: 4vh;
}

#portraitContent,
#landscapeContent {
  flex: 1;
  background: teal;
}

@media (orientation: landscape) {
  #portraitContent {
    display: none
  }
}

@media (orientation: portrait) {
  #landscapeContent {
    display: none
  }
}

<div id="wrapper">
  <div id="Header1"> header 1
  </div>
  <div id="Header2">header 2
  </div>
  <div id="portraitContent">
    portrait
  </div>
  <div id="landscapeContent">
    landscape
  </div>
  <div id="Footer">footer
  </div>
</div>

CodePudding user response：

  document.querySelector('#Main').style.height = "initial"   "10vh";

"initial" "10vh" is not valid. You can do it like this:

  document.querySelector('#Main').style.height  = "10vh";

Good luck!