Html-css height:100%

1

When using

#preview {
  height: 100%;
  width: 100%;
  min-height: 50%;
  min-width: 50%;
  background-color: red;
}

the div is not visible its only visible when I enter some text in it

2

You have not really provided enough information for us to help. Can you please link to your project?

If you use percentages the element has to get the value from its outer context (parent container). If that parent does not have height the child can not calculate a percentage to use.

1 Like
3

I’m working on the project locally
can I bypass looking the height of parent component
I used parent div with height:100% but that too is not working but width is working

4

You can share your code (both HTML and CSS) via a pastebin like dpaste.org. Sharing your full code would help.

5

nothing much to share I can share it here

6 
   <div>
        <textarea
          id="edit"
          onChange={this.props.handelChange.bind(this)}
          value={this.props.value}
        ></textarea>
      </div>


div {

  height: 100%;
  width: 100%;
  background-color: red;
}
textarea {
  min-height: 50%;
  min-width: 50%;
  height: 100%;
  width: 100%;
}
7

You can’t set a percentage of nothing (100% of 0 is what?).

You have to have some value the percentage is calculated from.

<div class="parent-1">
  <!--  50% is 100px  -->
  <div class="box"></div>
</div>

<div class="parent-2">
  <!--  50% is 0px  -->
  <div class="box"></div>
</div>

.parent-1 {
  height: 200px;
}

.box {
  height: 50%;
  background: red;
}

Edit: Or you have to propagate the html/body height (viewport) down through the tree.

<div class="parent-1">
  <!--  50% is half the viewport height  -->
  <div class="box"></div>
</div>

<div class="parent-2">
  <!--  50% is 0px  -->
  <div class="box"></div>
</div>

html, body {
  height: 100%;
}

.parent-1 {
  height: 100%;
}

.box {
  height: 50%;
  background: red;
}
1 Like
8

I understood now, but why width is working

9

Because block-level elements (e.g. a div) are full width by default.

If it was an empty inline element it would be 0x0 in width and height.

<!-- height 0, width 0 -->
<a href=""></a>