Overflow:auto causing scrolling/scroll bars to sho

2019-07-16 01:46发布

问题:

I have a container div (#columnsOne) set up at 920px + 38px padding + 2px border for a total of 960px wide.

(#columnsOne) uses CSS "overflow: auto;" to expand vertically and contain everything inside of it.

This works on all browsers to expand the div vertically, and also displays the horizonal width correctly on Firefox, Chrome, and IE7/8. However, on Safari, a horizontal scroll appears, and scrolls about 600px of blank space to the right.

At first I thought I might have the margin/padding set wrong, and that's why it might be expanding right, but there is no way I have 600px of extra space there.

Any thoughts as to why this might occur?

http://www.timetoplaymag.com/giveaway/daily/

Screen shots (new user, so I can't post on here): http://www.timetoplaymag.com/stacko/

many edits trying to get the code in here, newbie, sorry

 <div class="columnsOne">

        <div class="sectionLeft">

            image/name of giveaway are here

        </div>

        <div class="sectionRight">

          sign in form here

        </div>

    </div>


#columnsOne, .columnsOne {
clear: both;
width: 958px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #FFFFFF;
height: auto;
border: 1px solid #77787b;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: none;
overflow: auto;
}   


#columnsOne .sectionLeft, .columnsOne .sectionLeft {
float: left;
height: auto;
width: 590px;
background-color: #FFFFFF;
overflow: auto;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 19px;
padding-right: 19px;
padding-bottom: 19px;
padding-left: 19px;
}

#columnsOne .sectionRight, .columnsOne .sectionRight {
height: auto;
width: 270px
padding: 0px;
margin: 0px;
overflow: auto;
padding-top: 19px;
padding-right: 19px;
padding-bottom: 19px;
padding-left: 19px;
}

回答1:

You can set overflow-x:hidden; after overflow auto, and on safari at least that rule will be applied.



回答2:

I'm not sure overflow:auto; is the correct solution to be using here - you may want to read up on floats and how they control document flow.

However, I do notice when the width property is disabled on .sectionright, the extra space disappears.