CODEWITHSUNDEEP
css
user1163818
user1163818

Reputation: 317

div height: percent minus px

I'm very new to web-design, so this might be a stupid question, but bear with me please.

I want to create a div that is centred horizontally and has a height that always extends to 175px from the bottom- so basically a height of 100% minus 175px.

The content in that div is longer than the height and should be scrollable

Here is what I've got:

.container {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
    height: 100%;
}

But now I need some kind of cut off line that will stop the content to extend to the bottom of the page.

Upvotes: 3

Views: 4743

Answers (1)

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

It would help to know what kind of visual effect you're trying to achieve as well. Very often in CSS the visual effect is not totally symmetric with the code that you're using-- in other words, very often code is used to create "illusions"... anyway I digress.

for reference see http://jsfiddle.net/xqBph/6/

<div id="container">
    <div id="content">
      some content
    </div>
</div>

body,
html {
    height: 100%;
    position: relative
}

#container {
    width: 200px;
    height: 100%;
    overflow: hidden;
    margin-top: -175px;
    outline: 1px solid red; 
}

#content {padding-top: 175px}

Upvotes: 3

Related Questions