1

I want the green box to be 5px wide and the same height as the total height of the + and - buttons. I tried using height: 100% and it doesn't seem to work... what am I missing to do this?

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
 body {
  font-family: 'Open Sans', sans-serif;
 }
 canvas {
  border: 1px solid black;
 }
 div.canvas_holder {
  display: inline-block;
  position: relative;
 } 
 .canvas_annotate {
     z-index: 1;
  position: absolute;
 }
 div.canvas_title {
  left: 5px;
  top: 5px;
 }
 .canvas-zoom {
  left: 5px;
  bottom: 9px;
 }
 .canvas-zoom input {
  display: block;
  font-size: 140%;
 }
 div.zoom-button-container {
  display: inline-block;
 }
 div.zoomscale {
     width: 5px;
  border: 1px solid green;
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
 }
 .zoom-control {
     position: relative;
  display: block;
  border: 1px dashed red;
 }
</style>
</head>
<body>
 <div>
  <div class="canvas_holder canvas_wide">
  <canvas id="canvas1" height="200" width="200" ></canvas>
  <div class="canvas_title canvas_annotate"> canvas1 </div>

  <div class="canvas_holder canvas_wide">
  <canvas id="canvas2" height="200" width="200" ></canvas>
  <div class="canvas_title canvas_annotate"> canvas2 </div>
  <div class="canvas-zoom canvas_annotate">
    <div class="zoom-control">
       <div class="zoom-button-container">
      <input type="button" class="zoom" id="zoom-in" value="+"></input>
      <input type="button" class="zoom" id="zoom-out" value="&#8722;"></input>
       </div>
    <div class="zoomscale" ></div>
    </div>
  </div>
  </div>
 </div>
</body>
</html>
Jason S
  • 184,598
  • 164
  • 608
  • 970
  • 1
    You could add `display:flex;` to your `.zoom-control` class. – Aaron McGuire Aug 08 '19 at 20:59
  • NOT duplicate -- that question wants to have height 100% of the **entire page**. Please don't rush to find duplicates. – Jason S Aug 08 '19 at 21:02
  • it's not the question, it's about height:100% and more generally percentage height. Also note I didn't close as duplicate but it can be a duplicate since your issue is to understand why percentage height isn't working. – Temani Afif Aug 08 '19 at 21:27
  • also you said : *I tried using height: 100% and it doesn't seem to work... what am I missing to do this?* --> the possible duplicate answer this question – Temani Afif Aug 08 '19 at 21:31
  • Please try reading the entire question, I said "I want the green box to be 5px wide and **the same height as the total height of the + and - buttons**" – Jason S Aug 08 '19 at 21:33
  • Because you have to give people the benefit of the doubt. Be **VERY** conservative when you assume something about someone's questions. It is **extremely** frustrating (and this has happened several times in the past) to have someone close my question within 5 minutes of posting, because they didn't read it properly and assumed someone else had asked the same question. I typically spend 30-60 minutes before posting a question like this to come up with a simple reproducible use case. I put the effort in as a poster. You should put the effort in as a reviewer. – Jason S Aug 08 '19 at 22:28
  • " I gave you the canonical question dealing with percentage height in order to understand your issue" -- You know, you could have just asked that. Something like "Is your question how to set it to 100% of the page height, like this one?https://stackoverflow.com/questions/1622027/percentage-height-html-5-css" – Jason S Aug 08 '19 at 22:31
  • not a duplicate of https://stackoverflow.com/questions/1622027/percentage-height-html-5-css – Jason S Aug 13 '19 at 16:18

2 Answers2

2

One possible solution is to use display:flex:

.zoom-control 
{
    position: relative;
    display: flex;
    border: 1px dashed red;
}

If you need more control over the size(s), you can also use box-sizing to account for margins, etc.

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
 body {
  font-family: 'Open Sans', sans-serif;
 }
 canvas {
  border: 1px solid black;
 }
 div.canvas_holder {
  display: inline-block;
  position: relative;
 } 
 .canvas_annotate {
     z-index: 1;
  position: absolute;
 }
 div.canvas_title {
  left: 5px;
  top: 5px;
 }
 .canvas-zoom {
  left: 5px;
  bottom: 9px;
 }
 .canvas-zoom input {
  display: block;
  font-size: 140%;
 }
 div.zoom-button-container {
  display: inline-block;
 }
 div.zoomscale {
     width: 5px;
  border: 1px solid green;
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
 }
 .zoom-control {
     position: relative;
  display: flex;
  border: 1px dashed red;
 }
</style>
</head>
<body>
 <div>
  <div class="canvas_holder canvas_wide">
  <canvas id="canvas1" height="200" width="200" ></canvas>
  <div class="canvas_title canvas_annotate"> canvas1 </div>

  <div class="canvas_holder canvas_wide">
  <canvas id="canvas2" height="200" width="200" ></canvas>
  <div class="canvas_title canvas_annotate"> canvas2 </div>
  <div class="canvas-zoom canvas_annotate">
    <div class="zoom-control">
       <div class="zoom-button-container">
      <input type="button" class="zoom" id="zoom-in" value="+"></input>
      <input type="button" class="zoom" id="zoom-out" value="&#8722;"></input>
       </div>
    <div class="zoomscale" ></div>
    </div>
  </div>
  </div>
 </div>
</body>
</html>
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
  • 1
    great -- thanks, I wish this stuff were easier to understand... CSS sizing and positioning is hard to deal with. – Jason S Aug 08 '19 at 21:06
  • 1
    You are welcome. My go to guide to flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Lee Taylor Aug 08 '19 at 21:07
1

In order for height: 100%; to work properly, the parent needs to have a defined height in order for it to know how tall it should be. Without a defined height, height: 100%; won't work.

Try giving your .zoom-control class a height of 42px.

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
 body {
  font-family: 'Open Sans', sans-serif;
 }
 canvas {
  border: 1px solid black;
 }
 div.canvas_holder {
  display: inline-block;
  position: relative;
 } 
 .canvas_annotate {
     z-index: 1;
  position: absolute;
 }
 div.canvas_title {
  left: 5px;
  top: 5px;
 }
 .canvas-zoom {
  left: 5px;
  bottom: 9px;
 }
 .canvas-zoom input {
  display: block;
  font-size: 140%;
 }
 div.zoom-button-container {
  display: inline-block;
 }
 div.zoomscale {
     width: 5px;
  border: 1px solid green;
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
 }
 .zoom-control {
     position: relative;
  display: block;
  border: 1px dashed red;
                height: 42px;
 }
</style>
</head>
<body>
 <div>
  <div class="canvas_holder canvas_wide">
  <canvas id="canvas1" height="200" width="200" ></canvas>
  <div class="canvas_title canvas_annotate"> canvas1 </div>

  <div class="canvas_holder canvas_wide">
  <canvas id="canvas2" height="200" width="200" ></canvas>
  <div class="canvas_title canvas_annotate"> canvas2 </div>
  <div class="canvas-zoom canvas_annotate">
    <div class="zoom-control">
       <div class="zoom-button-container">
      <input type="button" class="zoom" id="zoom-in" value="+"></input>
      <input type="button" class="zoom" id="zoom-out" value="&#8722;"></input>
       </div>
    <div class="zoomscale" ></div>
    </div>
  </div>
  </div>
 </div>
</body>
</html>

If you need the heigh to be dynamic, then you can use flexbox to achieve this.

Hunter Turner
  • 6,804
  • 11
  • 41
  • 56