CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
user10845518
user10845518

Reputation:

How can I assign a height to an element, such that the height is equal to the height of the screen?

I have a <section> which has some content inside it.

<section class="Header">
    <h1 class="mainHeader">Lorem ipsum dolor sit amet con</h1>
    <h3 class="subHeader">obcaecati laboriosam iste ad exercitationem culpa aspernatur, molestias</h3>
</section>

I have given some CSS to all the subclasses of Header. Just to make them look good. Header should be the height of the screen. Because at every viewport font-size of all subclasses will change.

For now, I have given subHeader margin-bottom to make Header of the screen size. But that is a wrong practice because I need to change the margin-bottom of the subHeader every time and for every viewport. Plus at many screen sizes, it may be shorter or longer than the screen.

When I assign the media query to make the website responsive. For smaller screen sizes, eg: (max-width: 768px) I reduced the size of the text, and the header moves up, but I want it to be always the height of the device and not change its height even is the font-size is increased or decreased.

I have searched the web and got some solutions:

First: Use height: 100vh;

Second: By Javascript(code below)

var vHeight = $(window).height(),
  header= $('.Header');

header.css({
  "height": vHeight
});

But both of them are not working on smaller screen sizes. The height of the Header is longer than the screen size.

Wrap Up:

Main Question: How can I assign a height to an element, such that the height is equal to the height of the screen(which is being used at that time of viewing the website)?

Do anybody know how to do so?

Upvotes: 1

Views: 77

Answers (2)

CoderLee
CoderLee

Reputation: 3479

To get the screen's height you can use the Window.screen object, where you have several properties available to you like screen.height and screen.width.

For example, this will give you the screen's height in a variable:

let screenHeight = window.screen.height;

Now you can use that height to dynamically/programmatically change whatever you need with the exact height of the screen. For example, setting an element's height:

let yourElement = document.getElementById('elementsId');
yourElement.style.height = screenHeight;

edit

You could also try to get the view port height with window.innerHeight because it's based of the viewport's width:

let viewHeight = window.innerHeight;

that should play better with your media queries, although you may need to tweak a few pixels.

Be careful when using hard coded width's and height's. They can look great on one screen size, but break all the others. Try to stick with percentage based sizing and using things like the box model and flexbox for your layouts when responsiveness is a concern.

Upvotes: 1

Robert McKee
Robert McKee

Reputation: 21477

Does this not work for you?

html,
body {
  margin: 0;
  padding: 0;
}

.Header {
  height: 100vh;
  overflow: hidden;
  background-color: yellow; /* Just to show the area */
}
<section class="Header">
  <h1 class="mainHeader">Lorem ipsum dolor sit amet con</h1>
  <h3 class="subHeader">obcaecati laboriosam iste ad exercitationem culpa aspernatur, molestias</h3>
</section>
<p>This content is after the header</p>

Upvotes: 0

Related Questions