The height of the division is either inadequate or excessive when set at 100%

After making progress, I hit a roadblock that has me stumped.

The issue I'm facing is with the wrapper height setting. If I set it to auto, it stops at the bottom of the content, leaving the background exposed when the content is shorter than the window. But if I set the wrapper to 100%, it doesn't function as intended.

When the screen is maximized, the unnecessary scrolling makes the page taller than the window height.

On the flip side, when the window is smaller, the background creeps up behind the content. I want to prevent unnecessary scrolling when it's not needed and ensure the wrapper's background still covers the content when the window is shrunk. How can I resolve this?

Edit

<div id="xwraper">
<div id="wraper">

    <br class="cl cr" /> 
    <div id="imgholder">
        <div class="slider">
                            <ul>
                                <li rel="1">
                                    <img src="id_tags_1.png" width="510" height="340" alt="&nbsp;" />
                                    <h4>&nbsp;</h4>
                                </li>
                                <li rel="2">

                                    <img src="id_tags_2.png" width="510" height="340" alt="&nbsp;" />
                                    <h4>&nbsp;</h4>
                                </li>
                                <li rel="3">
                                    <img src="id_tags_3.png" width="510" height="340" alt="&nbsp;" />
                                    <h4>&nbsp;</h4>
                                </li>
                                <li rel="4">
                                    <img src="id_tags_4.png" width="510" height="340" alt="&nbsp;" />

                                    <h4>&nbsp;</h4>
                                </li>
                            </ul>
                            <div class="clear controls">
                                <img src="../../img/white-arrow-left.png" width="10" height="13" alt="&lt;" class="prev" />
                                <span class="pages">
                                    <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide selected 1" />
                                    <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide 2" />
                                    <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide 3" />

                                    <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide 4" />
                                </span>
                                <img src="../../img/white-arrow-right.png" width="10" height="13" alt="&gt;" class="next" />
                            </div>
                        </div>        </div>
    <div id="desc">
        <p>Identification Tags are a versatile, cost effective way to get your marketing message out. Used by travelers, sports teams, schools, health clubs, athletes and organizations, these tags are durable and each comes with it's own clear lanyard.</p>  
        <p>The back of each tag can be written on or we'll print another message on them for you. Choose one of our standard sizes, or we'll work with your custom size and shape. Please call Customer Service for pricing on custom shapes and sizes.</p>

        <ul>
            <li class="ulhead center">Product Specific Info.</li>
            <li class="ulhead">Stock</li>
            <li>Printed on durable .020&rdquo; thick plastic</li>
            <li class="ulhead">Color</li>
            <li>Neon and metallic colors are not available on Identifcation Tags</li>

            <li class="ulhead">Production Time</li>
            <li>Standard production time is approximately 10 days</li>
            <li class="ulhead">General</li>
            <li>Tags with no imprint are available, write or call for pricing</li>
            <li><a href="../../contact_us.php">Contact us</a> for a quote on custom sizes or shapes</li>

        </ul>
    </div>
    <br class="cl cr" /> 
    <table id="pb">
        <tr>
            <td>&nbsp;</td>
            <td>
                <table>
                    <tr class="bold">

                        <td>&nbsp;</td>  <td>125</td>  <td>250</td>  <td>500</td>  <td>1,000</td>  <td>1,500</td>  
                    </tr>
                </table>
            </td>

        </tr>
...
</div>

And the css for the wrappers:

#xwraper {
position:absolute;
left:50%;
top:0px;
width:1px;
height:100%;
overflow:visible;
z-index:-3;
}

#wraper {
position:absolute;
left:-450px;
top:0px;
width:900px;
height:100%;
padding-top:110px;
background-color:#FFFFFF;
border-left: solid 5px #003860;
border-right: solid 5px #003860;
z-index:inherit;
}

Answer №1

By setting the height property to 100%, the element assumes the height of its parent element, which in this case is the element with the ID "xwraper". This parent element, in turn, assumes the height of its parent element, the body tag, which defaults to the viewport size. You can observe how the height adjusts when you open and close the Chrome Dev Tools. The height value of auto simply adapts to the minimal height required to contain the content.

The additional scroll height is caused by the bottom margin of the last h3 tag within the "wraper" element. To address this issue, you need to modify the following CSS rule:

h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    width: 900px;
    margin: 40px 0px 60px 0px; /* CAUTION */
    text-align: center;
    float: left;
}

To fix the problem, adjust the height properties of both "xwraper" and "wraper" to use a min-height of 100%. This combination should achieve the desired appearance. In summary, the revised CSS should look like this:

#wraper {
    position: absolute;
    left: -450px;
    top: 0px;
    width: 900px;
    min-height: 100%;
    padding-top: 110px;
    background-color: white;
    border-left: solid 5px #003860;
    border-right: solid 5px #003860;
    z-index: inherit;
}

#xwraper {
    position: absolute;
    left: 50%;
    top: 0px;
    width: 1px;
    min-height: 100%;
    overflow: visible;
    z-index: -3;
}

#xwraper #wraper > h3 {
    margin-bottom: 8px;
}

Answer №2

Consider including the following snippet at the conclusion of your text

<div style="clear:both"></div>

Answer №3

If your container isn't flush with the top of the window - say, it has a margin or padding at the top - it will still expand to fill 100% of the window's height, but may extend beyond the bottom of the page.

Nevertheless, sharing more of your code would provide additional context for us to offer better assistance!

Answer №4

One suggestion I have is to establish a minimum height. In my experience, setting it to 900px on #xwrapper produced positive results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expanding to a full width of 100%, images on desktop screens are displayed larger than their original

I am facing a challenge with my three images lined up in a row, each with a width of 323px. In order to make my website responsive, I decided to switch from using width: 323px; to width: 100%;. While this adjustment worked well on mobile devices, I encoun ...

I encountered an issue where the font awesome icons failed to load on my website

My website is experiencing an issue where all the Font Awesome icons are not displaying despite having added Font Awesome. Here is the link to my site: https://i.stack.imgur.com/RcNtv.png .login-top .lg-in::before { font-family: "Fontawesome"; ...

React random marker position shifts when the screen size is adjusted

After displaying an image and adding a marker to it, I noticed that the marker's position changes when the screen size is adjusted. Why does this happen? And more importantly, how can I ensure that the marker stays in the same position relative to the ...

When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

Overlay a semi-transparent gray layer onto the background color

My Table has various TDs with different background colors, such as yellow, red, green, etc., but these colors are not known beforehand. I am looking to overlay a semi-transparent gray layer on certain TDs so that... The TD with a yellow background will t ...

The appended button remains unresponsive when clicked

After conducting extensive research, I have come across numerous questions on overflow regarding a specific issue, but none of the solutions seem to work. The problem revolves around a button that appears on the page when another element is clicked. The u ...

Tips for arranging letters on separate lines using CSS

I have a set of four divs that display numbers, and I want to show the corresponding words below each number. Despite trying to use the p tag with white-space: pre; in CSS, I have not been successful: #c { padding-top: 30px; padding-bottom: 30px; } ...

Guide to attaching a mouse click event listener to a child element within a Polymer custom component

I'm currently facing an issue where I am attempting to attach a click listener to one of the buttons within a custom element during the "created" life cycle callback (even attempted using the "ready" callback with the same outcome). Unfortunately, I ...

Fixing Email Validation Error in AngularLearn how to troubleshoot and resolve

I'm encountering an issue when trying to develop an email center using regex pattern, as I'm receiving a validator error in HTML. I have already installed ngx-chips and angular-editor, imported all the necessary modules and dependencies. Here is ...

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

Unusual margin glitch discovered in Chrome version 9

Encountered a strange issue with Google Chrome 9: A left-margin for an input element is specified but Chrome fails to apply it upon page load. Oddly enough, when I toggle the specific declaration off and then back on using Developer Tools, the margin is f ...

Is it possible for an animation to complete even if it is stopped midway?

I am currently working on a media player project where I have implemented a scrolling marquee effect for the song meta information using JavaScript and CSS. The scrolling effect only occurs when the track is playing, and I achieve this by adding/removing ...

splitting lengthy words into several lines

Does anyone know how to break words like the examples below using CSS or jQuery? SAMPLE 1 ConfigTechnologyHormonyAppComponentBackOfficeLaunch It needs to be broken into ConfigTechnologyHo rmonyAppComponentB ackOfficeLaunch SAMPLE 2 WorkAppComponentBa ...

"How to ensure a background image fits perfectly on the screen in IE10

I am facing a problem while trying to set the background image in CSS to fit the screen. It works fine with the latest version of Chrome, but there is an issue with IE 10. html { border-top: 10px solid #8A85A5; background: url("http://www.lifeintempe.com/ ...

What is the best way to align the main navigation at the center of

Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...

Searching on the search bar using Django's object.filter method results in returning Object (1)

Recently, I have been working on a Django website Project that features a database filled with various books. Within the site, there is a search bar that allows users to type in the name of a book and receive results from the database. However, I have enco ...

Are you interested in designing a bootstrap album for your homepage?

I'm currently working on designing an album-style layout similar to the examples provided below: if you look at the recent works section where you have an image on one side and text on the other, occupying the entire width of the page: or the example ...

What is the best way to overlay a video onto an image using HTML and CSS?

Currently, I am experimenting with a layering technique in HTML/CSS. The idea is to place an image behind a video to enhance the overall look of the video section. Here is a sample photoshop mockup that demonstrates what I am aiming for: HTML div id= " ...

Get your columns in order with Bootstrap4

I need to rearrange my 3 columns on desktop and mobile devices in different ways. Currently, my grid structure is set up like this: <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md- ...