Div inside is being cutoff by a div with 100% height

Question

Div inside is being cutoff by a div with 100% height

I am currently working on a website that has full height and width. I have a fixed panel on the left side and a scrollable main content area on the right side.

However, in the main content area, the last div is getting cut off for some reason. I have checked it on both Firefox and Chrome, but they show the same issue.

You can view the problem here: removed

As you can see, adding a large margin-bottom (50px or more) seems to solve the issue temporarily, but it doesn't look good aesthetically.

PS: Please disregard any missing images as I have only uploaded this specific page, not the entire website.

Thank you in advance for your help!

html css

Answer 1

Answer №1

It seems that setting the height to 100% can be quite inconsistent across different browsers, so it's best to avoid using it.
If you typically use a CSS reset in your layouts, be cautious about adding overflow: hidden; as it may cause layout issues right from the beginning.

Removing "overflow: hidden;" reveals the problem. Your content pane is taking on the height of the body, causing the "topBar" section to be hidden at the bottom of the page because of the Body element hiding the overflow.

Answer 2

It seems that setting the height to 100% can be quite inconsistent across different browsers, so it's best to avoid using it.
If you typically use a CSS reset in your layouts, be cautious about adding overflow: hidden; as it may cause layout issues right from the beginning.

Removing "overflow: hidden;" reveals the problem. Your content pane is taking on the height of the body, causing the "topBar" section to be hidden at the bottom of the page because of the Body element hiding the overflow.

Answer 3

Answer №2

Yes indeed - consider using overflow:scroll; or overflow:visible; You may also want to experiment with removing float:right; as it can disrupt the layout and cause issues with box adjustments.

Update: It appears that the problem lies in the content divs having floats on both left and right sides, which interferes with margins due to disrupting the flow of the page elements.

Update(2): The issue seems to be caused by setting overflow:hidden; in the main style rule affecting multiple elements. Changing this to overflow:visible; and adjusting overflow properties elsewhere should help resolve the problem. Removing inline floats could also improve the situation. Further tweaking may be needed, but addressing these key points should address the underlying issue.

Answer 4

Yes indeed - consider using overflow:scroll; or overflow:visible; You may also want to experiment with removing float:right; as it can disrupt the layout and cause issues with box adjustments.

Update: It appears that the problem lies in the content divs having floats on both left and right sides, which interferes with margins due to disrupting the flow of the page elements.

Update(2): The issue seems to be caused by setting overflow:hidden; in the main style rule affecting multiple elements. Changing this to overflow:visible; and adjusting overflow properties elsewhere should help resolve the problem. Removing inline floats could also improve the situation. Further tweaking may be needed, but addressing these key points should address the underlying issue.

Answer 5

Answer №3

Detected problematic CSS on main-style.css line 5:

overflow:hidden

and also on main-style.css line 127:

overflow-y:auto

This is causing the bottom of the page to be cut off. After correcting this issue, it became apparent that the wrapper div does not span the full height of the window (due to the background gradient ending prematurely), resulting in misaligned content within the main divs. These are common challenges mentioned by other users working on formatting their pages correctly.

Please refer to this JsFiddle here. for a working example in Chrome, FF, IE 6-8, and Safari.

To address the floated div content problem, ensure you specify a width of 50% for both left and right-floated content. You can also use text-align:right for right-floated content to keep it aligned to the right of the div.

 <div class="centerText messageWrapper">
        <div class="messgaeHeader">
            <div style="float:left; width:50%">
                From: 12345678<br />
            </div>
            <div style="float:right; width:50%; text-align:right">
                Date: 123456789<br />
            </div>

        </div>
        1234567890
 </div>

If anyone has a solution for the 100% height issue caused by these adjustments, please share. While my proposed fix may introduce new problems, it could serve as a starting point for finding the ultimate solution.

Answer 6

Detected problematic CSS on main-style.css line 5:

overflow:hidden

and also on main-style.css line 127:

overflow-y:auto

This is causing the bottom of the page to be cut off. After correcting this issue, it became apparent that the wrapper div does not span the full height of the window (due to the background gradient ending prematurely), resulting in misaligned content within the main divs. These are common challenges mentioned by other users working on formatting their pages correctly.

Please refer to this JsFiddle here. for a working example in Chrome, FF, IE 6-8, and Safari.

To address the floated div content problem, ensure you specify a width of 50% for both left and right-floated content. You can also use text-align:right for right-floated content to keep it aligned to the right of the div.

 <div class="centerText messageWrapper">
        <div class="messgaeHeader">
            <div style="float:left; width:50%">
                From: 12345678<br />
            </div>
            <div style="float:right; width:50%; text-align:right">
                Date: 123456789<br />
            </div>

        </div>
        1234567890
 </div>

If anyone has a solution for the 100% height issue caused by these adjustments, please share. While my proposed fix may introduce new problems, it could serve as a starting point for finding the ultimate solution.

Div inside is being cutoff by a div with 100% height

Answer №1

Answer №2

Answer №3

Similar questions

Accessing JavaScript elements from PHP code

The issue with grunt-contrib-compass not functioning properly within npm

What could be causing my jQuery script to malfunction?

Unable to locate CSS file in subfolder

Bootstrap - What is the best way to increase the gap between card elements?

Is it possible to extract the CSS path of a web element using Selenium and Python?

When a user clicks anywhere on the website, the active and focused class will be automatically removed

What is preventing images from displaying in my slider within baguetteBox?

Tips on preventing a lone track in Laravel for Server Sent Events

Ways to customize the design of a bootstrap button using jQuery

Incorporating Javascript into HTML

Tips for sending hidden variables created dynamically with Jquery

php executing javascript - error

I'm attempting to utilize a basic webcam capture upload feature, but it seems that the upload function is not functioning properly

Why does my dialog box only open the first time and not the second time?

Trouble with Bootstrap Popover's visibility

Tips for adjusting the size of your Navigation bar

The Impreza theme is experiencing difficulty displaying Font Awesome icons

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

Having trouble with refreshing the div content when using jQuery's $.ajax() function