Mobile app version of vmapp.org
Login or Join
Twilah924

: How can I set the height of my website to be the same height as the visible browser window, with no vertical scrolling? I want to design a portfolio website, and I don't want it to scroll

@Twilah924

Posted in: #Css #Dimensions #HowTo #Html #WebsiteDesign

I want to design a portfolio website, and I don't want it to scroll vertically.

What are the dimensions for this kind of website, like the standard browser height?

How can I create a website that's the same size as the visible height of the browser?

10.03% popularity Vote Up Vote Down

Login to follow query

More posts by @Twilah924

Login to post a comment!

3 Comments

Sorted by latest first Latest Oldest Best

 

@Samaraweera207

The dimensions are variable.

User Joojaa is correct when they say that "You can no way know what size or shape the recipients screen is going to be."

You cannot set any explicit value in your CSS, because if you want to consistently support all browsers, you have no way of knowing what size it's going to be.

I'm going to give you one method, using just HTML and CSS. I have briefly tested a basic version in Chrome and IE. It's fine back to IE7, and then the vertical alignment drops out, but the single page with no scrolling remains intact as far back as IE5(!).

Here's an image of the result (click on the image to go to a working example on jsFiddle):



In case my example link goes dead, here's the code for my mockup:

The HTML:

<body>
<div class="centered-container">
<div class="content">
<div class="name">
Eileen Dover
</div>
“I'm part of the 21<sup>st</sup> century now.<br> I have an online portfolio!”
<br>
<br>
<a href="#">Click here to see some of my awesome work!</a>
</div>
</div>
</body>


The CSS:

body {
width:100%;
height:100%;
background:#191970;
padding:0;
margin:0;
font-size:10px;
font-family: 'Open Sans', sans-serif;
}

.centered-container {
position:absolute;
left:5%;
right:5%;
top:5%;
bottom:5%;
background:#fff;
display:table;
width:89%;
height:89%;
margin:0 auto;
}

.content {
position:relative;
display:table-cell;
vertical-align:middle;
text-align:center;
font-weight:400;
font-size:2.500em;
color:#191970;
border-top:4px ridge #4c4ca3 ;
border-left:4px ridge #4c4ca3 ;
border-bottom:4px groove #4c4ca3 ;
border-right:4px groove #4c4ca3;
}

.name {
font-size:3.500em;
font-weight:700;
padding:0.050em 0;
}


This is the most I can do for you at the moment. I have no idea how much HTML, CSS or JavaScript you know, but if you really want to make this, you should learn a bit and make a plan. This kind of website will only work with certain kinds of designs. Namely, ones with minimal text.

Good luck with your project.

10% popularity Vote Up Vote Down

 

@Harper654

What do you mean by "it does not scroll vertically"?

That you do not want it to scroll vertically, or that for some reason it is "fixed"?

There is no such thing as guidelines for web page withs and heights anymore. As user2725502 and Joojaa points out: the massive variety of devices makes this wildly impractical if not directly impossible to do sensibly.

Look into responsive design. I would suggest you use a framework; this will save you masses of time and loads of headaches. They have already sorted out the responsive part. To create a responsive site from scratch, taking into account every single option for devices is ... well... pointless, as very smart people have already solved this problem for us. Personally, I use Bootstrap, but there are many other options.

10% popularity Vote Up Vote Down

 

@Sue6373160

These days webdesignerd tend to use responsive values. So make it responsive by using %. Although this makes using images tricky

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme