CODEWITHSUNDEEP
css
Rohan Veer
Rohan Veer

Reputation: 1490

Full height to div with relative position

How can I assign full height to a div with relative position -

div {
  border: 1px solid;
  box-sizing: border-box;
}
.home-gallery {
  position: relative;
  height: 100%;
  width: 100%;
}
.rc-contain {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.rc-slider {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
<div class="home-gallery">
  <div class="rc-contain">
    ....
  </div>
  <div class="rc-slider">
    ....
  </div>
</div>

but my home-gallery div is not taking full height. How can I assign height dynamically to home-gallery as I am focusing on responsive design.

Upvotes: 5

Views: 10207

Answers (3)

Hitesh Sahu
Hitesh Sahu

Reputation: 45072

Set HTML Body full width

 html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

After that, you can set your div with the relative position to take full width and height

.container {
  position: relative;
  background-color: blue;
  height: 100%;
  width: 100%;
  border:1px solid;
  color: white;
  background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: #cccccc;
}

Final result:

https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100

enter image description here

Upvotes: 1

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

* {
  padding: 0;
  margin: 0;
}
div {
  border: 1px solid;
  box-sizing: border-box;
}
.home-gallery {
  position: relative;
  height: 100vh;
  width: 100%;
}
.rc-contain {
  position: absolute;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(255, 0, 0, .2);
  /* red */
}
.rc-slider {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 255, .2);
  /* blue */
}
<div class="home-gallery">
  <div class="rc-contain">
    ....
  </div>
  <div class="rc-slider">
    ....
  </div>
</div>

Upvotes: 1

chirag
chirag

Reputation: 1779

just add following line to css

html, body {
    height: 100%;
}

html

<div class="home-gallery">
    <div class="rc-contain">
       ....contain
    </div>
    <div class="rc-slider">
       ....slider
    </div>
</div>

css

html, body {
    height: 100%;
}
.home-gallery{
  position: relative;
  height: 100%;
  width: 100%;
  border:1px solid;
}

.rc-contain{
  position:absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.rc-slider{
  position:absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

here is jsfiddle: demo

Upvotes: 3

Related Questions