Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
@MrE.Upvoter thanks for the response. –  arsa Jul 5 at 17:32
    
I originally thought JS was the only option, but found it quite possible with just HTML and CSS. I have posted my method as an answer. –  DumbNic Jul 6 at 3:04
1  
Note that web sites scroll. That's kinda one of the defining aspects of the medium. It may make more sense to embrace that rather than fight that. –  DA01 Jul 6 at 3:40
    
@DA01 I've seen many portfolio type websites that exclude/mess with vertical scrolling - some good, some bad. I'm not saying I think it's great, but common enough that it's worth answering. –  DumbNic Jul 6 at 4:05

3 Answers 3

up vote 0 down vote accepted

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

share|improve this answer
    
thanks for the reply.but there must be some value while designing the height of the website. –  arsa Jul 5 at 7:26
5  
@arsa no there must not be. You can no way know what size or shape the recipients screen is going to be –  joojaa Jul 5 at 7:57
1  
This doesn't really answer the question. Responsive web sites are about handling variable width...not height. –  DA01 Jul 6 at 3:39

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):

enter image description here

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.

share|improve this answer
1  
It's not a bad try, but note that I can easily make it scroll vertically by narrowing my browser a bit. Ultimately, if there is more content than can fit, you will get scroll bars. There's ways around this with variable sized content--and that can work to an extent--but I'd still argue that it's fighting the medium rather than embracing it. Not that that is always a bad thing, mind you. –  DA01 Jul 6 at 4:22
1  
If I had a compelling enough reason, I think I could make it work quite consistently - with a much more complex framework - but I sincerely hope nobody ever gives me that reason. Thank you for the upvote (I assume). :) –  DumbNic Jul 6 at 4:28
    
The answer is definitely worth an upvote! I think your last comment sums it up well, actually "If there is a compelling enough reason..." Only the OP can answer that, of course, but I think it's a good rhetorical question for the OP to think about. –  DA01 Jul 6 at 4:47
    
@DA01 I might misunderstand entirely, but I would say that achieving this is impossible, unless the content is tiny. Or am I getting it all wrong? –  Benteh Jul 7 at 10:29
1  
@RandomO'Reilly I suppose it could be done if the content, itself, scales. So you could use javascript to determine the height of the viewport, then shrink the scale of entire page (perhaps using CSS's zoom style) until you can determine (via JS) that the content fits sans scrolling. –  DA01 Jul 7 at 13:37

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.

share|improve this answer
    
-1 for promoting Bootstrap. There's no need to take "into account every single option for devices". Responsiveness should be dictated by the content, which is not nearly as difficult as you're making it out to be. –  cimmanon Jul 5 at 11:16
2  
Good that you are telling my why you downvote, but I am merely suggesting Bootstrap. I suggest you write your own - and a better answer. I have created all kinds of complex applications from scratch, and I have lectured on both methods. I am merely suggesting what I think will be useful for the OP. –  Benteh Jul 5 at 11:25
    
@RandomO'Reilly thanks for your feedback. –  arsa Jul 5 at 17:32
2  
Bootstrap is perfectly acceptable recommendation. No need for the downvote. –  DA01 Jul 6 at 3:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.