All geek questions in one place

CSS How to prevent the browser from showing scrollbars when the div goes outside the window?

I have a centered shell with the following CSS:

div.wrapper {
width: 1170px;
padding-left:30px;
margin-top: 80px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
position:relative;  
background-color:black; }

inside I have a div with the following css:

position:absolute;
top:-26px;
left:517px;
height:63px;
z-index:3;

inside this div is an image with a width of 759 pixels, which makes the packaging enlarged and makes the browser display a v-scrollbar at lower screen resolutions. I want the image to go beyond the wrapper, but not allow the browser to display the scroll bar, so that the right side of the image is displayed only if your browser window is large enough and the shell maintains a width of 1200 pixels. I cannot make this a background image because it iterates over some other materials. something compatible with s> = IE7 would be nice.

, , : http://img153.imageshack.us/img153/6070/hpx.jpg

- , 1200 ( 1200 , ) ( )

+3
4

overflow: hidden , , , .

.

+4

#your_div { overflow: hidden; }, , . #your_div { overflow: visible; }, , div.

+2

, - , , div :

<body>
  <div class="abs">the div with the image</div>
  <div class="wrapper">the wrapper div</div>
</body>

Unfortunately, this probably means that you cannot position it very well. You may need to use Javascript to get the width / height of the page and / or position of the wrapper div and calculate the offset accordingly. (You will find stack overflow questions for these bits.)

+2
source

The problem is that img is inline. Not tested, but you have to "display: block image" and then float or completely position it.

+1
source

Source: https://habr.com/ru/post/1741077/

More articles:


All Articles