Html Question posted in
Some basic documentation can be found here.

html css width issue when window has scroll on bottom

I am working on a site, and I can not figure out how to solve this problem.
When the page is loaded and the browser is maximized, the bottom bar goes all across the screen, background is showing blue.

When the site is resized and the browser has the bottom scroll bar visible to scroll horizontal, the background of the div cuts off where the screenenter image description here ends, and it is just white after that, instead of filling it all the way blue.

Any idea what do I need to change on this? I assume the Body of the site needs something? I know probably super easy just cant figure it out.

Thanks

https://jsfiddle.net/hd9c76tz/

CSS:

    * {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  background-color: #FFFFFF;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "Lato", Helvetica Neue, sans-serif;
  font-weight: 300;
  margin: 0px;
  width: 100%;
  text-align: left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#content {
  background-color: #FFFFFF;
  color: #000433;
  font-size: 0px;
}

#content-block {
  width: 100%;
  background-color: #FFFFFF;
  padding: 20px 0px;
  font-size: 12px;
}

#content-headline {
  font-size: 55px;
  font-weight: 500;
  line-height: 55px;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

#content-item-container {
  width: 100%;
  font-size: 0;
}

#content-wrapper {
  max-width: 1460px;
  min-width: 1200px;
  padding: 0px 48px;
  margin: 40px auto 0 auto;
  text-align: center;
}

#facts-block {
  padding: 20px 0px;
  margin: 40px auto 0 auto;
  background-color: #EFF6FF;
  width: 100%;
  color: #000433;
  font-size: 0px;
  font-weight: 500;
}

#facts-block-content {
  padding: 0 0 0 20px;
  display: inline-block;
  vertical-align: top;
  height: 55px;
}

#facts-block-headline {
  font-size: 16px;
  margin: 0 0 14px 0;
  text-transform: uppercase;
}

#facts-block-text {
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
}

#facts-block-item {
  font-size: 0px;
  display: inline-block;
  margin: 0px;
  width: 25%;
  padding: 40px 0px;
  text-align: left;
}

#facts-block-wrapper {
  min-width: 1200px;
  max-width: 1460px;
  ;
  margin: auto;
  text-align: center;
  padding: 0px 48px;
}

#legal-content-paragraph {
  font-size: 14px;
  font-weight: 300;
  line-height: 25px;
  text-align: justify;
  margin: 0 0 40px 0;
  color: #000433;
}
Tags:

2

Answers


  1. 0

    Remove the min-width for the use of the wrapper. If you can set the container for a specific width, then use the max-width so you can easily manage all your elements without scrolling through the section. Use the below code to fulfil your requirements.

    * {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #FFFFFF;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: "Lato", Helvetica Neue, sans-serif;
    font-weight: 300;
    margin: 0px;
    width: 100%;
    text-align: left;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#content {
    background-color: #FFFFFF;
    color: #000433;
    font-size: 0px;
}

#content-block {
    width: 100%;
    background-color: #FFFFFF;
    padding: 20px 0px;
    font-size: 12px;
}

#content-headline {
    font-size: 55px;
    font-weight: 500;
    line-height: 55px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

#content-item-container {
    width: 100%;
    font-size: 0;
}

#content-wrapper {
    max-width: 1460px;
    min-width: 100%;
    padding: 0px 48px;
    margin: 40px auto 0 auto;
    text-align: center;
}

#facts-block {
    padding: 20px 0px;
    margin: 40px auto 0 auto;
    background-color: #EFF6FF;
    width: 100%;
    color: #000433;
    font-size: 0px;
    font-weight: 500;
}

#facts-block-content {
    padding: 0 0 0 20px;
    display: inline-block;
    vertical-align: top;
    height: 55px;
}

#facts-block-headline {
    font-size: 16px;
    margin: 0 0 14px 0;
    text-transform: uppercase;
}

#facts-block-text {
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
}

#facts-block-item {
    font-size: 0px;
    display: inline-block;
    margin: 0px;
    width: 25%;
    padding: 40px 0px;
    text-align: left;
}

#facts-block-wrapper {
    min-width: 100%;
    max-width: 1460px;
    margin: auto;
    text-align: center;
    padding: 0px 48px;
}

#legal-content-paragraph {
    font-size: 14px;
    font-weight: 300;
    line-height: 25px;
    text-align: justify;
    margin: 0 0 40px 0;
    color: #000433;
}
    <!-- CONTENT -->
<div id="content">
    <!-- CONTENT BLOCK -->
    <div id="content-block">
        <div id="content-wrapper">
            <div id="content-container">
                <div id="content-headline">Lorem Ipsum</div>
                <div id="content-item-container">
                    <div id="legal-content-wrapper">
                        <div id="legal-content-item">
                            <div id="legal-content-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet porttitor eget dolor morbi non arcu. In nibh mauris cursus mattis molestie a iaculis at erat. Neque volutpat ac tincidunt vitae semper quis. Augue interdum velit euismod in. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Sapien pellentesque habitant morbi tristique senectus et. Eget nunc scelerisque viverra mauris. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt vitae semper quis lectus nulla at. Vitae congue mauris rhoncus aenean vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Feugiat vivamus at augue eget arcu dictum. Arcu dictum varius duis at consectetur lorem. Tellus elementum sagittis vitae et leo. Faucibus vitae aliquet nec ullamcorper sit amet risus.</div>
                            <div id="legal-content-headline">HEADLINE</div>
                            <div id="legal-content-paragraph">Vitae nunc sed velit dignissim sodales ut eu. Pellentesque habitant morbi tristique senectus et netus et malesuada. Tellus in hac habitasse platea dictumst. Ultrices dui sapien eget mi. Eu mi bibendum neque egestas. Neque convallis a cras semper. Sit amet mattis vulputate enim nulla aliquet porttitor. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Ut tellus elementum sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna. Facilisis volutpat est velit egestas dui id ornare arcu. Senectus et netus et malesuada <a href="#">fames ac turpis</a> egestas.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- FACTS Block -->
    <div id="facts-block">
        <div id="facts-block-wrapper">
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
            <div id="facts-block-item">
                <div id="facts-block-content">
                    <div id="facts-block-headline">
                        Headline
                    </div>
                    <div id="facts-block-text">
                        Text
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You can remove the min-width property. It will fix the scroll and div cutoff issues.

    #content-wrapper {
  max-width: 1460px;
  /* min-width: 1200px; */
  padding: 0px 48px;
  margin: 40px auto 0 auto;
  text-align: center;
}

#facts-block-wrapper {
  /* min-width: 1200px; */
  max-width: 1460px;
  margin: auto;
  text-align: center;
  padding: 0px 48px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search