CODEWITHSUNDEEP
htmlcss
CustomX
CustomX

Reputation: 10113

Div doesn't resize properly to different screensizes

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;
}

Upvotes: 0

Views: 100

Answers (1)

OliverRadini
OliverRadini

Reputation: 6467

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.

Upvotes: 1

Related Questions