div tag should not take up space_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-18 22:33 出处：网络

#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.

相关专题：css

#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.

How do I make it so that #decoration to not occupy space so the vertical scroll bar do not appear.

EDIT:

Check out this link to see what I want. Just in such a way no vertical scroll bar is there.

http://jsfiddle.net/HLqwN/

Using overflow:hidden will clip part of #decoration so that do not work.

<head>
    <style>
        #wrapper {
            width: 900px;
            position: relative;
        }
        #decoration {
            position: absolute;
            width: 542px;
            height: 126px;
            top: 0;
            left: 660px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <img id="decoration" src="/images/decoration.png" alt="" title="" />
  开发者_开发百科      <div id="content">
            Some content
        </div>
    </div>
</body>

You could set overflow: hidden as the other answers are suggesting.

However, a "decoration" image should not be an <img>, it should be a CSS background-image.

Like this:

#wrapper {
    height: 126px;
    background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}

See: http://jsfiddle.net/rdSJH/

if it is a decorative image, perhaps you should use it as a background image on the wrapper rather than in HTML source, you can still position it 660px left and it will not then cause a content scroll bar as it's not content.

#wrapper {
   width: 900px;
   position: relative;
   background: url(background.png) no-repeat 660px 0;
}

[update after your clarification]

OK so you want the decoration to overlap the wrapper if there's space available to do so, like a pop-out?

is so try this, fiddle

notes: the span holding the background image should be outside the wrapper, no width on the span use your left co-ordinate and right: 0; or whatever margin from the right you might like, and still use the image as a background image. the span can sit down the bottom of your HTML out of the way

You could use overflow: hidden; on your wrapper

You might want to wrap a div around the decoration image and set overflow:hidden on that. Setting overflow:hidden on your wrapper might cause other content to be clipped depending on your layout.

If it's just a decoration you should try doing it with a background image though, then you don't have to worry about the clipping.