Главная » Языки программирования

Hello World

Содержание
  1. How do I make an element the height of the browser window?
  2. Set size of HTML page and browser window
  3. 5 Answers 5
  4. JavaScript — Get Browser Height
  5. 10 Answers 10
  6. CSS get height of screen resolution
  7. 10 Answers 10

How do I make an element the height of the browser window?

I’ve written code to make a section’s height (#home) match the window height, but it’s bugging out. Here’s what I use:

// Make Home section height of window function fitHomeToScreen() < var windowHeight = $(window).innerHeight(); $("#home").css("height", windowHeight); alert(windowHeight); >$(window).load(fitHomeToScreen); $(window).resize(fitHomeToScreen);

Every time I refresh the browser (no matter what size I drag the browser to), windowHeight stays the same. Then, if I resize the browser window a bit, the windowHeight doubles. Every time. Forever. Like so: 902px [drag browser a few pixels wider] 1804px [drag browser a few pixels wider] 3608 . etc. . Here’s all my code: HTML

Headline.
Blah blah blah.
What we do
Some stuff
Lorem ipsum
Some stuff
Lorem ipsum
  • Firstname Lastname
    Firstname Lastname
    Title
  • Firstname Lastname
    Firstname Lastname
    Title
  • Firstname Lastname
    Firstname Lastname
    Title
  • Firstname Lastname
    Firstname Lastname
    Title
  • Firstname Lastname
    Firstname Lastname
    Title
  • Firstname Lastname
    Firstname Lastname
    Title
  • Firstname Lastname
    Firstname Lastname
    Title
    • 



 Firstname Lastname
Firstname Lastname
Title
Some stuff
Lorem ipsum
Lorem ipsum dolor sit amet
Email us
Address
Phone number
info@company.com
Lorem ipsum
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table < border-collapse: collapse; border-spacing: 0; >/* End CSS reset */ /* Basic styles */ body < font-family: Lato; font-weight: 300; font-size: 18px; color: #222; text-align: center; >a < text-decoration: none; >h2 < font-size: 60px; >p < line-height: 160%; font-size: 20px; >.explanation < font-size: 28px; line-height: 160%; >/* Modal */ .modal < display: none; position: fixed; top: 50%; left: 50%; width: 80%; height: 80%; background-color: #fff; z-index: 99999; >.modal-backdrop < display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); >.modal .x < width: 20px; height: 20px; >/* Section - Main menu */ #main-menu < position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: red; z-index: 9999; padding: 0 30px; box-sizing: border-box; text-align: left; >#main-menu a < color: #fff; >#main-menu .logo < display: inline-block; width: 336px; height: 40px; background-image: url("../images/logo.png"); background-repeat: no-repeat; margin-top: 10px; >#main-menu nav < float: right; >#main-menu nav ul li < display: inline-block; margin: 0 0 0 30px; >#main-menu nav ul li a < letter-spacing: .05em; font-size: 16px; display: table-cell; vertical-align: middle; height: 60px; -webkit-transition: ease-in-out .15s; -moz-transition: ease-in-out .15s; -o-transition: ease-in-out .15s; transition: ease-in-out .15s; >#main-menu nav ul li a:hover < box-shadow: inset 0 -4px 0 0 white; >/* Section - Hero */ #home < display: block; position: relative; width: 100%; background: black; color: white; >#home .content < width: 80%; position: absolute; top: 50%; left: 50%; >#home .headline

Источник

Set size of HTML page and browser window

I have a div element with . I want to set this element to be the size of the viewable area in the browser window. I am using the following JS to do so.

var container= document.getElementById("container"); container.style.height=(window.innerHeight); container.style.width=window.innerWidth;

However, the browser window size is larger than the viewable size and horizontal and vertical scroll bars appear. How do I make it so that my HTML page fits into the browser window without a need for scroll bars? EDIT: I am basically asking, how can I make the document size the same as the viewport size?

5 Answers 5

    html, body < width: 100%; height: 100%; margin: 0; padding: 0; background-color: green; >#container < width: inherit; height: inherit; margin: 0; padding: 0; background-color: pink; >h1  
Hello World

The background colors are there so you can see how this works. Copy this code to a file and open it in your browser. Try playing around with the CSS a bit and see what happens.

The width: inherit; height: inherit; pulls the width and height from the parent element. This should be the default and is not truly necessary.

Try removing the h1 < . >CSS block and see what happens. You might notice the layout reacts in an odd way. This is because the h1 element is influencing the layout of its container. You could prevent this by declaring overflow: hidden; on the container or the body.

I’d also suggest you do some reading on the CSS Box Model.

Источник

JavaScript — Get Browser Height

I am looking for a code snippet to get the height of the viewable area within a browser window. I had this code, however it is somewhat bugged as if the the body doesn’t exceed the height the of the window then it comes back short.

I have tried a couple of other things but they either return NaN or the same height as the above. Does anyone know how to get the real height of the browsing window?

10 Answers 10

function alertSize() < var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) < //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; >else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) < //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; >else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) < //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; >window.alert( 'Width = ' + myWidth ); window.alert( 'Height = ' + myHeight ); >

So that’s innerHeight for modern browsers, documentElement.clientHeight for IE, body.clientHeight for deprecated/quirks.

window_size = $(window).height();

You can use the window.innerHeight

We don’t need to support Internet Explorer 🙂 If you must, try document.documentElement.clientHeight or using jquery instead.

The way that I like to do it is like this with a ternary assignment.

 var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth; var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

I might point out that, if you run this in the global context that from that point on you could use window.height and window.width.

Works on IE and other browsers as far as I know (I have only tested it on IE11).

Super clean and, if I am not mistaken, efficient.

I’m interested to know if there is a technical reason why the pattern var width = window.innerWidth || window.clientWidth; is not used.

Well the first reason is that only one of the two properties is defined, depending on the browser type used. As for why not just use the coalesce operator, technically that should be used when the items are defined, but one of them might be some false value. Chrome is smart enough to still give a value, but at least historically, Firefox would complain that the first variable doesn’t exist. Not sure how it is now, but that’s the reason why.

Ok, just for reference, I tested this in the latest versions of Firefox, Chrome, Safari, and IE Edge. Using coalesce on undefined variables works fine, so it looks like that issue has been fixed. So with that in mind, the only reason you would prefer using ternary statements over the coalesce form is for personal style reasons, or so you can support older browsers. Keep in mind that when this andwer was written, we had to support IE6 and FF3, and if I had to guess, I would say it was FF3 that had the issue with the coalesce syntax.

There’s a simpler way than a whole bunch of if statements. Use the or (||) operator.

function getBrowserDimensions() < return < width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth), height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) >; > var browser_dims = getBrowserDimensions(); alert(«Width = » + browser_dims.width + «\nHeight mt24″>

)» data-controller=»se-share-sheet» data-se-share-sheet-title=»Share a link to this answer» data-se-share-sheet-subtitle=»» data-se-share-sheet-post-type=»answer» data-se-share-sheet-social=»facebook twitter devto» data-se-share-sheet-location=»2″ data-se-share-sheet-license-url=»https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f» data-se-share-sheet-license-name=»CC BY-SA 3.0″ data-s-popover-placement=»bottom-start»>Share
Add a comment |
3

This should works too. First create an absolute element with absolute position and 100% height:

Then, get the window height from that element via offsetHeight

var winHeight = document.getElementById('h').offsetHeight; 
function getBrowserSize() < var div = document.createElement('div'); div.style.position = 'absolute'; div.style.top = 0; div.style.left = 0; div.style.width = '100%'; div.style.height = '100%'; document.documentElement.appendChild(div); var results = < width: div.offsetWidth, height: div.offsetHeight >; div.parentNode.removeChild(div); // remove the `div` return results; > console.log(getBrowserSize());

Источник

CSS get height of screen resolution

I’m having a hard time getting the height of lower screen resolution because my screen resolution is 1920×1080. Does anyone know how to get height and width of the screen resolution? I checked my work on a 1024×768 resolution and it is rendered all messed up.

I was looking for the same thing the other day, and stumbled upon this interesting piece of literature: mislav.uniqpath.com/2010/04/targeted-css

10 Answers 10

You could use viewport-percentage lenghts.

More info also available through Mozilla Developer Network and W3C.

the only problem with this approach is that the vh in mobile is calculated including the address bar, which makes it hard to count on it for fixed full-hight elements.

Unfortunately «vh» is not the screen height, but the viewport height (hence the abbreviation). If the browser window is not maximised, you are not getting screen height, you get the window viewport height.

Adding to @Hendrik Eichler Answer, the n vh uses n% of the viewport’s initial containing block.

Also, the viewport height is for devices of any resolution, the view port height, width is one of the best ways (similar to css design using % values but basing it on the device’s view port height and width)

vh
Equal to 1% of the height of the viewport’s initial containing block.

vw
Equal to 1% of the width of the viewport’s initial containing block.

vi
Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis.

vb
Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis.

vmin
Equal to the smaller of vw and vh.

vmax
Equal to the larger of vw and vh.

Источник

Читайте также:  Running java from console
Оцените статью
© 2024 Программирование