如何更改单个元素的溢出，同时隐藏主体的溢出？

发布于 2024-12-04 05:33:38 字数 1390 浏览 1 评论 0原文

下面的 html 本质上应该是左侧垂直对齐的图像列表。我希望图片滚动，但不希望页面的其余部分滚动。我还希望页面的其余部分有隐藏的溢出。有没有办法只用 html 和 css 来做到这一点以及如何做？

HTML：

<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
</head>
<body>
<div id="scroll">
<img class="left" id="image1" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\bradBeachHeart.JPG" alt="Brad at the Lake"/>

<img class="left" id="image2" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mariaNavi.jpg" alt="Making Maria Na'vi"/>

<img class="left" id="image3" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mattWaterRun.jpg" alt="Photoshopped Matt"/>
</div>
</body>
</html>

CSS：

body{
overflow:auto;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
overflow:auto;
}
.left{
z-index:inherit;
float:left;
width:200px; 
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}

原文

The html below should essentially be a list of images aligned vertically on the left. I want the pictures to scroll, but I don't want the rest of the page to scroll. I also want the rest of the page to have a hidden overflow. Is there anyway to do this with just html and css and how?

HTML:

<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
</head>
<body>
<div id="scroll">
<img class="left" id="image1" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\bradBeachHeart.JPG" alt="Brad at the Lake"/>

<img class="left" id="image2" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mariaNavi.jpg" alt="Making Maria Na'vi"/>

<img class="left" id="image3" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mattWaterRun.jpg" alt="Photoshopped Matt"/>
</div>
</body>
</html>

CSS:

body{
overflow:auto;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
overflow:auto;
}
.left{
z-index:inherit;
float:left;
width:200px; 
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜声 2024-12-11 05:33:38

只需将 #scroll 的高度设置为 100%，并将 body 设置为 overflow:hidden：

body{
    overflow:hidden;
    margin-left:0;
    margin-top:0;
}
div#scroll{
    border-right:1px solid orange;
    position:absolute;
    z-index:2;
    float:left;
    width:200px;
    overflow:auto;
    height: 100%;
}
.left{
    z-index:inherit;
    float:left;
    width:200px; 
    min-height:200px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:200px; /* for IE5.x and IE6 */
    opacity:0.4;
    filter:alpha(opacity=40);
}
#image1, #image2, #image3{
    width:200px;
}

http://jsfiddle.net/QcHNu/

Just give your #scroll a height of 100%, and your body a overflow: hidden:

body{
    overflow:hidden;
    margin-left:0;
    margin-top:0;
}
div#scroll{
    border-right:1px solid orange;
    position:absolute;
    z-index:2;
    float:left;
    width:200px;
    overflow:auto;
    height: 100%;
}
.left{
    z-index:inherit;
    float:left;
    width:200px; 
    min-height:200px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:200px; /* for IE5.x and IE6 */
    opacity:0.4;
    filter:alpha(opacity=40);
}
#image1, #image2, #image3{
    width:200px;
}

http://jsfiddle.net/QcHNu/

回复收藏 0 原文

~没有更多了~