How to prevent scrollbar if an area hangs out of the containing block?

0
votes

I have to write markup and CSS so that a background image doesn't produce a scrollbar. Only if the viewport is more narrow than the inner content wrapper, a scrollbar is created:

http://www.mcm.unisg.ch/

Doesn't work for me: Absolutely positioned div on right causing scrollbar when the left doesn't.

One of may vain attempts in a fixed layout:

#background {
  width: auto;
  margin-left: -75px;
  margin-right: -75px;
}

An area that hang out of the containing block to the left (because of a negative margin) isn't reachable by scrolling to the left. Yes! But a negative margin-right creates a scrollbar in case of a narrow viewport. How can I prevent the scrollbar as long as the viewpart is wider than the containing block?

The markup:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>&nbsp;</title>
  <link rel="stylesheet" type="text/css" href="css/general.css" media="screen, projection"/>
  <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="css/general-ie.css" media="screen"/>
  <![endif]-->
</head>
<body>

  <div id="page">
    <img id="background" src="images/visual.jpg" alt="" />
    <div id="head"><h1>Page title</h1></div><!-- /#head -->
    <div id="mainpart">
      <ul id="zones">
        <li>
          <ul>
            <li class="module">Modul #1</li><!-- /#module -->
          </ul>
        </li>        
      </ul><!-- /#zones -->
      <hr />
    </div><!-- /#mainpart -->
  <div id="foot"><h1>Footer</h1></div><!-- /#foot -->
</div><!-- /#page -->

</body>
</html>

The CSS rules:

body {
  background: #000;
  color: #000;
}
#page, #mainpart {
  background: #fff;
}

#page {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto;
  margin-left: -75px;
  margin-right: -75px;
}

Can anybody give me some good adivce? Thank you.

3
htmlcssscrollbarbrowser-scrollbars

3 Answers

2
votes

To prevent scrollbars appearing use:

mySelector
{
    overflow: hidden;
}

You can see it in all its glory here: jsFiddle example.

0
votes

This quite an old post, but for all the Googlers out there:

This question (https://stackguides.com/questions/13326111/element-outside-container-without-creating-scrollbars) has some really good answers for this. If I understand your requirements.

You can do this with either a "fake body" element, or using breakpoints to just hide the content when the viewport is too small.

Both are straightforward options. If the content in you "hanging" panel only makes sense when you can see all/most of it, then the breakpoint option can save you some bandwidth, and possibly save the user some frustration.

0
votes

To elaborate on the "fake body" option hinted on by mediaashley, it means to wrap your content including the overflowing element in an element like this:

#fakeBody {
    width: 100%;
    min-width: 1000px; // needs to match the main content’s width
    overflow: hidden;
}

The width:100% means it will match the window’s width, but when the window gets smaller than min-width its overflow:hidden attribute will cut off the hanging-out content.