CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JaeYoungHwang
JaeYoungHwang

Reputation: 99

How can I expand element automatically in The Web using Bootstrap?

I have a notebook and a monitor using 1920 X 1080 resolution but they have different screen size. (notebook : 13 inch, PC monitor : 19 inch)

I worked on the notebook screen, I defined the element 'Height' at 'Value X'px fixed (example value...). and then when I moved my internet browsers (chrome, IE, etc.) to PC screen, it showed me a lot of empty space as follows.

enter image description here

How can I solve this problem?

someone suggested me using media query... is it ok?

Upvotes: 0

Views: 62

Answers (1)

Sahil Dhir
Sahil Dhir

Reputation: 4250

I have made an example below.. keeping the width and height in percentages that will adjust automatically on any device you will open.

*{box-sizing:border-box}
body,html{ width:100%; height:100%}
.bluebg{ width:100%; height:100%; background:blue; padding:20px;}
.yellowbg{ width:100%; height:100%; background:yellow; }
<div class="bluebg">
  <div class="yellowbg">
    &nbsp;
  </div>
</div>

Upvotes: 3

Related Questions