CSS 溢出隐藏在css中而不是顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15680785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow hidden below not top in css
提问by vusan
overflow-y:hiddenwill hide the view both upper part and lower part. Can we just show upper part but not lower part.
Now I like something like this overflow-y-top:visible; overflow-y-bottom:hidden;
Similarly overflow-x-left:visible;overflow-x-right:hidden
So is there something we can do in css?
overflow-y:hidden将隐藏上部和下部的视图。我们可以只显示上半部分而不显示下半部分吗？现在我喜欢overflow-y-top:visible; overflow-y-bottom:hidden;
类似overflow-x-left:visible;overflow-x-right:hidden
这样的东西 那么我们可以在 css 中做些什么吗？
Specific problem mine:
具体问题我的：
HTML:
HTML：
<div id="main">
<div id="arrow">▲</div>
<div id="content">id="toggle_view">view more</div>
<div id="content1"> this is any thext</div>
<div id="content2"> this is any thext</div>
<div id="content3"> this is any thext</div>
<div id="content4"> this is any thext</div>
</div>
Css:
css：
#main {overflow-y:hidden;height:100px;position:relative}
#arrow {position:absolute;top:-30px;}
#toggle_view{position:absolute;right:0;bottom:0;}
Now I want to make the content hidden not the arrow. So Is there some technique to make just the below portion of div hidden not top?
现在我想让内容隐藏而不是箭头。那么是否有一些技术可以使 div 的下方部分隐藏而不是顶部？
采纳答案by Don
You could add padding to the top of the element for however much you want displayed, This could then change to however much you need using javascript. If I understand correctly though, what you're looking for is that the arrow/viewmore is always displayed. so adding a padding-top: 20px;or whatever measurement unit you like should work
您可以将填充添加到元素的顶部以显示您想要显示的数量，然后这可以更改为您需要使用 javascript 的数量。不过，如果我理解正确，您要寻找的是始终显示箭头/viewmore。所以添加一个padding-top: 20px;或任何你喜欢的测量单位应该可以工作
I added some simple javascript here just to make it work. You probably want animations and all that...
我在这里添加了一些简单的 javascript 只是为了让它工作。你可能想要动画等等...
See this jsfiddle: http://jsfiddle.net/KPbLY/85/
看到这个jsfiddle：http: //jsfiddle.net/KPbLY/85/
To have the background not go into the padding (as mentioned in the comments) use another nested div such as:
要使背景不进入填充（如评论中所述），请使用另一个嵌套的 div，例如：
回答by Fluoxetine
Let's look at the HTML code first. You want:
让我们先看一下 HTML 代码。你要：
<div id="arrow">▲ (view less)</div>
<div id="main">
<div id="content1">text from #content1</div>
<div id="content2">text from #content2</div>
<div id="content3">text from #content3</div>
<div id="content4">text from #content4</div>
</div>
<div id="toggle_view">view more</div>
Then for the CSS, you want:
然后对于 CSS，您需要：
#main {overflow-y:hidden;height:100px;position:relative}
#arrow {cursor: pointer;}
#toggle_view{ cursor: pointer;}
.inactive { color: gray; }
It's really hard to tell you can click something if there's no cursor:pointer. Also, we want to indicate to the users when a button is inactive (ex. it's useless to click "view more" if you're already viewing every
如果没有 ，很难说你可以点击某些东西cursor:pointer。此外，我们希望在按钮处于非活动状态时向用户指示（例如，如果您已经在查看每个按钮，则单击“查看更多”是没有用的）
All righty, let's get to the JavaScript. You mentioned you're using a library, but not which one, so I'll just assume jQuery. First, we need to set our variables:
好吧，让我们来看看 JavaScript。你提到你正在使用一个库，但不是哪个库，所以我只假设 jQuery。首先，我们需要设置我们的变量：
var heightOfMain = $('#main').height();
var heightOfContent1 = $('#content1').height();
var differenceInHeight = heightOfMain - heightOfContent1;
Then, when clicking on #arrow, we want to change the height of #mainto remove #content2, #content3, and #content4, leaving only #content1behind (basically, we want to "remove" a height equal to differenceInHeight). We also want to then inactivate #arrow, since there's no point in saying "view less" if you're already viewing less. Finally, we want to make sure that "view more" is active (since we'll be toggling that later).
然后，当点击 时#arrow，我们想要改变高度#main以移除#content2、#content3和#content4，只留下#content1后面（基本上，我们想要“移除”一个等于 的高度differenceInHeight）。我们还想然后 inactivate #arrow，因为如果您已经减少了观看，那么说“减少观看”是没有意义的。最后，我们要确保“查看更多”处于活动状态（因为我们稍后会切换）。
$('#arrow').click(function() {
$('#main').animate({
height: heightOfContent1
});
$(this).addClass('inactive');
$('#toggle_view').removeClass('inactive');
});
Finally, we want to enable #toggle_view. When clicking it, we want to re-add the height that we took off (differenceInHeight). Then, since we have everything already viewed, we can inactivate "view more". Finally, we need to activate "view less" again.
最后，我们要启用#toggle_view. 单击它时，我们想重新添加我们去掉的高度 ( differenceInHeight)。然后，由于我们已经查看了所有内容，我们可以禁用“查看更多”。最后，我们需要再次激活“少看”。
$('#toggle_view').click(function() {
//you want to remove contents 2 through 4, which have a combined height
//of differenceInHeight
$('#main').animate({
height: differenceInHeight });
$(this).hide();
$('#arrow').show();
});
For everything put together, see this jsFiddle.
对于所有放在一起的内容，请参阅此 jsFiddle。
回答by Johan
Try this
尝试这个
#content {
display: none;
}
or
或者
#content {
visibility: hidden;
}
回答by Marc Audet
I think that you want something that works like this:
我认为你想要这样的东西：
<div class="show-panel">
<div class="arrow">▲</div>
<div class="content">This is some content...
several paragraphs for example.</div>
</div>
with the following jQuery action:
使用以下 jQuery 操作：
$(".arrow").click(function(){
$(this).next().toggle();
});
Fiddle Reference: http://jsfiddle.net/audetwebdesign/bQ8G3/
小提琴参考：http: //jsfiddle.net/audetwebdesign/bQ8G3/
You can add a CSS style to initially hide the content if that is desired. The cleanest way of doing this is wrapping the elements to be shown/hidden in a parent element and then showing/hiding the parent element.
如果需要，您可以添加 CSS 样式以最初隐藏内容。最简洁的方法是将要显示/隐藏的元素包装在父元素中，然后显示/隐藏父元素。
回答by Rohit Azad
Now you can used to css
现在你可以习惯 css
As like this
像这样
#main {overflow-y:hidden;height:100px;position:relative; background:red;}
#toggle_view{position:absolute;right:0;bottom:0;}
#arrow {position:absolute;top:50px;right:0;background:green;padding:5px; cursor:pointer;z-index:2;}
#main > #arrow ~ div{display:none;}
#main > #arrow:focus ~ div, #main > #arrow:hover ~ div{display:block;}
