Jump to content
otakublade

looking for a way to input window size into css

Recommended Posts

I am looking for either in css a way to take data from the device used to input as an attribute or a way to combine css and javascript to do the same thing.  there may be a variable in css now but it isn't a true variable as far as I have found so far in the tutorial and the info I want I have only seen accessed using javascript so wanted to try combining it with the css I already have.  I am looking to basically create a title page with css at the top of a website or in my case an actual ebook.  I have this most of the way done.  I want it to survive multiple devices so I want a variable height and width and I found that but the height is not quite perfect yet.  I am using 100vh for 100% viewport height meaning the entire screen height but what I really want is the full window height.  there is a javascript function in the tutorial that gives you the window.innerheight but I don't know how to input that number into my height attribute.  right now that 100vh height is making it so that the footer is just beyond the screen and I have to scroll down a little to see it.  but what I want it to do is that there is no scrolling needed because it fits perfectly on the screen.

here is the code as is.

 

<html>
<head>
  <title>Title Page Template</title>

<style>
.title {
  display: flex;
  position: absolute;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.title > div {
  width: 100%;
  margin: 10px;
  text-align: center;
}

.copy {
 display: flex;
  height: 100vh;
  width: 100vw;
  align-items: flex-end;
  justify-content: center;
}

.copy > div {
  width: 100%;
  text-align: center;
}

p.large { font-weight: bold; margin-top:1em; font-size: 200%; text-indent: 0em; text-align:center;
}

p.medium { margin-top:1em; font-weight: bold; font-size: 150%; margin-top:1.0em; text-indent: 0em; text-align:center; 
}

p.small { font-weight: bold; margin-top:1em; font-size: 125%; text-indent: 0em; text-align:center;
}

</style>
</head>
<body>

<div class="title">
  <div><p class="large" id="start">Title</p></div>
  <div><p class="medium">The Sub-title</p></div>
  <div><p class="small">By <i>Author</i></p></div>
</div>
<div class="copy">
  <div><p class="small">Publisher &#169; 2019</p></div>
</div>

</body>
</html>

and here is the javascript code I found that gets the info I want

<html>
<body>

<p>Click the button to display this frame's height and width.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The innerWidth and innerHeight properties are not supported in IE8 and earlier.</p>

<p id="demo"></p>

<script>
function myFunction() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>

</body>
</html>

is there a way to get the innerheight and innerwidth into my css to finish this title page design?

Share this post


Link to post
Share on other sites

 Anything before or after element using height: 100vh; will be added to this. This should ideally be used on outer container only.

You would have the same problem with javascript example.

If you know the height of elements coming before and after you can use calc() to reduce there heights from 100vh height element.

#copy { height: calc(100vh - 150px - 100px);}

But you have to allow for content stacking such as lines of text as device width shrinks.

 

Share this post


Link to post
Share on other sites

but the title element doesn't effect the copy element because to make sure they were both aligned with the full page I changed the z-index of the title element to -1 so that the two elements didn't interact at all.  they overlap each other.  the problem is that the vh measurement includes the entire available screen including the toolbar at  the bottom of the screen where the start menu is in windows.  however the innerheight measurement would give the entire available space of a window but would also include any scroll bar there might be.  however, thanks for commenting on the device width shrink concern although because of the z-index the elements won't stack but I have to go through and make sure that the text wrap doesn't push the elemtn even further down.  I need to make sure that the element expands up instead of down kind of a text wrap up or something but not quite.  I will go look at that now and adjust the code if necessary and when I find the right way to adjust the code.

Share this post


Link to post
Share on other sites

The vh unit is a proportion of the available space in the window. 100vh should fill the window exactly with no scrollbars. If you are getting any scrollbars with 100vh, it's because you have padding, margins or other elements outside of the current one.

Share this post


Link to post
Share on other sites

okay I have fixed the problem and it was not padding or margins but the coding of web browsers and scroll bars I think.  I think that you can't have anything touching the limit of the window or you get a scrollbar regardless of if you have more content or not.  all I did was reduce the vw and vh by 1 from the edge and it works perfectly.  I think that the program adds scroll bars as soon as the content touches the edge not once it goes over the edge.  that is my theory.  I am going to test it a little by reducing the vw and vh into the decimals and see how it goes.

Share this post


Link to post
Share on other sites

I just tested it to three decimal places and it still works.  so  a vw and vh of 99.998 still didn't give me any scroll bar.  I did 99.98 because I wanted to keep things centered so when I reduced the vw and the vh I added properties of left and top so it is height of 99.998vh with top of .001vh and the same for width and left properties.  so that problem is solved but I would still love to know how to have css and javascript interact as initially asked for future reference for  when I need to input a variable into css that the css var can't handle.

Share this post


Link to post
Share on other sites

The body has a default margin, also 100% width with 10px margin will also produce scrollbars, as with width 100% especially you do not need as being a div block element it will fill the available width. I seriously would not use javascript for this.

Share this post


Link to post
Share on other sites

thanks for the info about the body default.  perhaps adding a css to body to remove the margin will allow me to go back to using 100vh.  I don't know if I can remove the width properties or not and get a good result.  I will test it out as well.  no I won't be using javascript for this but I would still like to learn how to get css and javascript to communicate variables for the future if and when I need to create a variable property in some other way.

Share this post


Link to post
Share on other sites

you were right and that makes Ingolme right too about it being a margin or padding problem.  I just didn't know that the body tag had a default margin.  I tested it and 100vh and 100vw work once I added a css for body to have margin: 0.  however I do have to include width of 100% or 100vw to the outer flex-container to create perfect center for the title, subtitle, and author.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...