0

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.

Community
  • 1
  • 1
roger
  • 271
  • 1
  • 7

3 Answers3

2

To prevent scrollbars appearing use:

mySelector
{
    overflow: hidden;
}

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

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • Thank you for your answer, but I want to achieve the exact opposite effect (= no clipping and no scrollbar). – roger Mar 30 '12 at 16:46
  • Ah, in that case, select the img with CSS and use: `width: 100%; height: 100%;`. This should keep it within the confines of the div. – Kyle Mar 30 '12 at 17:03
  • I want the img hanging out of the containing block to the left and to the right (no clipping). Second, the img mustn't create a scrollbar. Only if the viewport is more narrow than the containing block, a scrollbar should be produced. Like in http://www.mcm.unisg.ch/. – roger Mar 30 '12 at 17:13
  • Oh, what you're asking for is impossible. A container element will always clip its contents. – Kyle Mar 30 '12 at 18:01
  • Okay, for example IE <= 7 will clip the contents. No problem! The containing block needs hasLayout. Look at http://jsfiddle.net/BBpLR/2/. But the scrollbar (created by the yellow part on the right) gets on my nerves... Preventing that scrollbar is impossible? Do I have this right? – roger Mar 30 '12 at 19:00
  • Unfortunately yes: http://jsfiddle.net/BBpLR/3/ It's the browser behaviour. Unless you have your body and html set to 100% width with a wrapping div around all of the site's content. – Kyle Mar 30 '12 at 20:30
0

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

This question (https://stackoverflow.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.

Community
  • 1
  • 1
mediaashley
  • 342
  • 1
  • 3
  • 8
0

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.

Frederik
  • 467
  • 6
  • 16