0

I have centered my div ui-content to the middle of my page on a resolution of 1920x1080, but when I check it on a resolution of 1366x768 the div doesn't adjust itself for a lower height. On the 1920x1080 resolution, when I resize the height I have the exact same problem. I would have expected it resize to something smaller, as it does with the background image.

I tried working with the atrribute max-height, but that just adds a scroll bar and does nothing. I also tried Oliviers suggestion, but that didn't seem to do anything either. I created a JSFiddle with the full code here and added the relevant css code below.

element.style {
    margin-bottom: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ui-content {
    padding-top: .5em;
    max-width: 768px;
    margin: 0 auto;
    background-color: rgba(19, 23, 23, 0.38);
    border-radius: 26px;
}
Community
  • 1
  • 1
CustomX
  • 9,948
  • 30
  • 85
  • 115
  • How is the height of `ui-content`'s parent element specified? This may be helpful: http://stackoverflow.com/questions/1622027/percentage-height-html-5-css – OliverRadini Nov 16 '15 at 11:18
  • @OliverRadini, I presume that's div `home` then? All I can see is a min-height attribute which I can't remove (keeps getting added?). – CustomX Nov 16 '15 at 11:32
  • I'd like to try and help but you've made no effort to do this http://stackoverflow.com/help/mcve. – Michael Nov 16 '15 at 11:33
  • @Michael, I've tried everything I can find on SO ... I'm trying the link Olivier sent me, but what more do you want me to do? – CustomX Nov 16 '15 at 11:36
  • Take the website, get rid of all of the irrelevant stuff and post a JSFiddle or something. "Please fix my website" is not going to help any future users. As soon as it goes down this question will be useless. – Michael Nov 16 '15 at 11:41
  • @Michael, is it better like that? – CustomX Nov 16 '15 at 11:48
  • A bit, but does 2000 lines of HTML and CSS sound "minimal" to you? Did you read the SO help link? – Michael Nov 16 '15 at 11:52
  • Just to illustrate the point I made earlier, the problem is that the parent element has no specified height, as far as I can see. If you set it to a % height then it does not know what the % is of. I made this fiddle: https://jsfiddle.net/tdgyo4md/1/ to show that as JQuery can read the height of the window, it can resize the ui-content accordingly. But when you ask html to set a height as a proportion of something without a defined height it is unable to do that. – OliverRadini Nov 16 '15 at 11:57
  • @OliverRadini, thanks for the feedback. – CustomX Nov 16 '15 at 12:08
  • 1
    @Michael, I have edited the JSFiddle. I think this is the bare minimum. – CustomX Nov 16 '15 at 12:34

1 Answers1

1

The problem is that he parent div of the ui-content element has no specified height. I made another fiddle to demonstrate:

https://jsfiddle.net/v8exwacj/

Note in the fiddle that the % height element only gains a height when its parent has a specified height, ie height: 200px;

You could remedy this by giving the parent element a specific height, or by using javascript to adjust the height dynamically. The issue is explained in much further detail here: Percentage Height HTML 5/CSS

That answer mentions the following as a solution for modern browsers: 

div {
    height:100vh; 
}

Which would make the div 100% of the viewport height.

Community
  • 1
  • 1
OliverRadini
  • 6,238
  • 1
  • 21
  • 46
  • @OlivierRadini, so I'd have to add `height: 100vh;` to my parent div? – CustomX Nov 16 '15 at 12:37
  • Potentially; if you did that you'd then have a standard % height on the ui-content, ie `height: 75%` or something. Alternatively you could have something like `height: 75vh` on the ui content and that would nto require the parent element to have a height. – OliverRadini Nov 16 '15 at 12:49
  • Thanks for the help! :) I wasn't able to get it working like that, but I used `margin-top: 8vh and margin-bottom: 5vh` as workaround. – CustomX Nov 16 '15 at 13:44
  • ah, that's a great idea, glad to hear it worked out in the end, perhaps there's also a way around this in browsers which don't support `vh` – OliverRadini Nov 16 '15 at 13:51