如何让两个 div 屏幕显示和隐藏在相同的高度

Question

I have two screens I'd like to show. I'd like them to be exactly the same height but the first screen must be the same height as the second and the second screen is sized dynamically.

Is there a way to do this correctly so I can switch between them and both have the same height using CSS or do I have to use JavaScript?

I have it sort of working with the example JavaScript below but there's some odd space above the buttons.

 var basicView = document.getElementById("basic"); var advancedView = document.getElementById("advanced"); var basicButton = document.getElementById("basicButton"); var advancedButton = document.getElementById("advancedButton"); basicView.style.height = getComputedStyle(advancedView).height; advancedView.style.display = "none"; basicButton.addEventListener("click", function() { advancedView.style.display = "none"; basicView.style.display = "block"; }) advancedButton.addEventListener("click", function() { advancedView.style.display = "block"; basicView.style.display = "none"; })

 #basic { background-color: rgb(255,0,0,.2); } #advanced { background-color: rgb(155,145,0,.2); }.buttonbar { flex-direction:row; }.button { display: inline-block; background-color: gainsboro; padding: 4px 8px; cursor: pointer; }.button:hover { background-color: silver; }

 <div id="container"> <div id="basic"> <p>Hello world basic</p> </div> <div id="advanced"> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> </div> </div> <div class="buttonbar"> <div id="basicButton" class="button"> Basic </div> <div id="advancedButton" class="button"> Advanced </div> </div>

Answer 1

Here is an idea with CSS grid where you make both element inside the same track so they have the same size and then you adjust visibility

 var basicView = document.getElementById("basic"); var advancedView = document.getElementById("advanced"); var basicButton = document.getElementById("basicButton"); var advancedButton = document.getElementById("advancedButton"); advancedView.style.visibility = "hidden"; basicButton.addEventListener("click", function() { advancedView.style.visibility = "hidden"; basicView.style.visibility = "visible"; }) advancedButton.addEventListener("click", function() { advancedView.style.visibility = "visible"; basicView.style.visibility = "hidden"; })

 #basic { background-color: rgb(255,0,0,.2); } #advanced { background-color: rgb(155,145,0,.2); }.buttonbar { flex-direction:row; }.button { display: inline-block; background-color: gainsboro; padding: 4px 8px; cursor: pointer; }.button:hover { background-color: silver; } #container { display:grid; } #container > *{ grid-row:1; grid-column:1; }

 <div id="container"> <div id="basic"> <p>Hello world basic</p> </div> <div id="advanced"> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> </div> </div> <div class="buttonbar"> <div id="basicButton" class="button"> Basic </div> <div id="advancedButton" class="button"> Advanced </div> </div>

Another idea using flexbox where you consider negative margin to allow the overlap and rely on the stretch behavior to have the same height:

 var basicView = document.getElementById("basic"); var advancedView = document.getElementById("advanced"); var basicButton = document.getElementById("basicButton"); var advancedButton = document.getElementById("advancedButton"); advancedView.style.visibility = "hidden"; basicButton.addEventListener("click", function() { advancedView.style.visibility = "hidden"; basicView.style.visibility = "visible"; }) advancedButton.addEventListener("click", function() { advancedView.style.visibility = "visible"; basicView.style.visibility = "hidden"; })

 #basic { background-color: rgb(255,0,0,.2); } #advanced { background-color: rgb(155,145,0,.2); }.buttonbar { flex-direction:row; }.button { display: inline-block; background-color: gainsboro; padding: 4px 8px; cursor: pointer; }.button:hover { background-color: silver; } #container { display:flex; } #container > *{ flex-grow:1; flex-basis:0; } #container >:last-child { margin-left:-100%; }

 <div id="container"> <div id="basic"> <p>Hello world basic</p> </div> <div id="advanced"> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> </div> </div> <div class="buttonbar"> <div id="basicButton" class="button"> Basic </div> <div id="advancedButton" class="button"> Advanced </div> </div>

Answer 2

Answer:

Your main problem is that your paragraphs have margins that are pushing out over the boundary of the parent div.

This is causing the buttons to be pushed down.

There are a few things you can do.

---

Add an Overflow Scroll property:

#advanced, #basic {
  overflow-y: scroll;
}

This tells the advanced and basic tabs to not exceed the limits they're assigned in the DOM, and to scroll if they do!

Example:

 var basicView = document.getElementById("basic"); var advancedView = document.getElementById("advanced"); var basicButton = document.getElementById("basicButton"); var advancedButton = document.getElementById("advancedButton"); function sameSize(from, to) { let el = getComputedStyle(from); ["height", "width"].forEach(p => to.style[p] = el[p]); } sameSize(advancedView, basicView); advancedView.style.display = "none"; basicButton.addEventListener("click", function() { advancedView.style.display = "none"; basicView.style.display = "block"; }) advancedButton.addEventListener("click", function() { advancedView.style.display = "block"; basicView.style.display = "none"; })

 #basic { background-color: rgb(255,0,0,.2); } #advanced { background-color: rgb(155,145,0,.2); }.buttonbar { flex-direction:row; }.button { display: inline-block; background-color: gainsboro; padding: 4px 8px; cursor: pointer; }.button:hover { background-color: silver; } #basic, #advanced { overflow-y: scroll; }

 <div id="container"> <div id="basic"> <p>Hello world basic</p> </div> <div id="advanced"> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> </div> </div> <div class="buttonbar"> <div id="basicButton" class="button"> Basic </div> <div id="advancedButton" class="button"> Advanced </div> </div>

---

Add an Overflow Hidden property:

#basic, #advanced { 
 overflow: hidden;
}

This will say to the divs " Anything outside of the rendered box is invisible , capeche? " - which works as long as the content, you know, doesn't exceed the box to begin with.

 var basicView = document.getElementById("basic"); var advancedView = document.getElementById("advanced"); var basicButton = document.getElementById("basicButton"); var advancedButton = document.getElementById("advancedButton"); function sameSize(from, to) { let el = getComputedStyle(from); ["height", "width"].forEach(p => to.style[p] = el[p]); } sameSize(advancedView, basicView); advancedView.style.display = "none"; basicButton.addEventListener("click", function() { advancedView.style.display = "none"; basicView.style.display = "block"; }) advancedButton.addEventListener("click", function() { advancedView.style.display = "block"; basicView.style.display = "none"; })

 #basic { background-color: rgb(255,0,0,.2); } #advanced { background-color: rgb(155,145,0,.2); }.buttonbar { flex-direction:row; }.button { display: inline-block; background-color: gainsboro; padding: 4px 8px; cursor: pointer; }.button:hover { background-color: silver; } #basic, #advanced { overflow: hidden; }

 <div id="container"> <div id="basic"> <p>Hello world basic</p> </div> <div id="advanced"> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> </div> </div> <div class="buttonbar"> <div id="basicButton" class="button"> Basic </div> <div id="advancedButton" class="button"> Advanced </div> </div>

---

Reduce the Paragraph Tag Margins:

#basic p, #advanced p {
  margin: 0;
}

Basically what's screwing up your layout right now are the margins on the paragraph tags within your separate tabs. You can fix this simply by removing them - short and simple. The problem lies in you having to keep an eye on the content of the divs so that they never spill over their container. If this is likely, great! If it isn't it would be best to use one of the other answers above!

Example:

 var basicView = document.getElementById("basic"); var advancedView = document.getElementById("advanced"); var basicButton = document.getElementById("basicButton"); var advancedButton = document.getElementById("advancedButton"); function sameSize(from, to) { let el = getComputedStyle(from); ["height", "width"].forEach(p => to.style[p] = el[p]); } sameSize(advancedView, basicView); advancedView.style.display = "none"; basicButton.addEventListener("click", function() { advancedView.style.display = "none"; basicView.style.display = "block"; }) advancedButton.addEventListener("click", function() { advancedView.style.display = "block"; basicView.style.display = "none"; })

 #basic { background-color: rgb(255,0,0,.2); } #advanced { background-color: rgb(155,145,0,.2); }.buttonbar { flex-direction:row; }.button { display: inline-block; background-color: gainsboro; padding: 4px 8px; cursor: pointer; }.button:hover { background-color: silver; } #basic p, #advanced p { margin: 0; }

 <div id="container"> <div id="basic"> <p>Hello world basic</p> </div> <div id="advanced"> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> </div> </div> <div class="buttonbar"> <div id="basicButton" class="button"> Basic </div> <div id="advancedButton" class="button"> Advanced </div> </div>

---

Grid-Area:

Another cool recent addition to the CSS spec is CSS Grid .

You can use display: grid on a parent element, and then assign the layout a number of ways.

The easiest way is to use grid-area on each of the children you'd like to layout, and give them a name. This allows you to easily swap/adjust the layout by changing grid-template-areas with a string that defines where the children should be located, by name. Ae

.parent {
  display: grid;
  grid-template-areas: "a b c";
}
.childLeft {
 grid-area: a;
}
.childMiddle {
 grid-area: b;
}
.childRight {
 grid-area: c;
}

---

Within your code using this pattern is great because it actually allows you to deal with any number of tabs as needed with a few changes of CSS and this change to your JavaScript:

document.querySelectorAll( ".buttonbar div" )
    .forEach( element => {
        let tabID = element.id.replace( "Button", "" ), 
    elementTab = document.querySelector("#container #" + tabID),
    otherTabs = document.querySelectorAll( "#container  div:not([id='" + tabID + "'])");

    //on btn click
    element.addEventListener( "click", function() {
      //hide other tabs
      otherTabs.forEach( tab => {
                        tab.style.display = "none";
            });
      //show clicked tab
                elementTab.style.display = "block";
      //change template area
                container.style.gridTemplateAreas = "'" + tabID + "'";
            } );
    } )

 let container = document.querySelector( "#container" ); document.querySelectorAll( ".buttonbar div" ).forEach( element => { let tabID = element.id.replace( "Button", "" ), elementTab = document.querySelector("#container #" + tabID), otherTabs = document.querySelectorAll( "#container div:not([id='" + tabID + "'])"); //on btn click element.addEventListener( "click", function() { //hide other tabs otherTabs.forEach( tab => { tab.style.display = "none"; }); //show clicked tab elementTab.style.display = "block"; //change template area container.style.gridTemplateAreas = "'" + tabID + "'"; } ); } )

 #basic { background-color: rgb(255, 0, 0, .2); } #advanced { background-color: rgb(155, 145, 0, .2); }.buttonbar { flex-direction: row; }.button { display: inline-block; background-color: gainsboro; padding: 4px 8px; cursor: pointer; }.button:hover { background-color: silver; } #container { display: grid; grid-template-areas: "basic"; grid-template-rows: 150px; } #basic { grid-area: basic; } #advanced { grid-area: advanced; display: none; }

 <div id="container"> <div id="basic"> <p>Hello world basic</p> </div> <div id="advanced"> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> <p>Hello world adv</p> </div> </div> <div class="buttonbar"> <div id="basicButton" class="button"> Basic </div> <div id="advancedButton" class="button"> Advanced </div> </div>