我有一张桌子.它<td>有overflow: auto.
宽度设置为100px.仅在Firefox中,超出100px的文本不会被隐藏并替换为滚动条.
当超出容器宽度时,如何隐藏内容并使用滚动条？
我的页面上有以下内容 DIV，它显示动态文本：
<div id="someContent">
</div>
它使用以下 CSS 来切断附加文本：
#someContent {
height: 200px;
width: 200px;
overflow: hidden;
}
如果我将此文本加载到 DIV 中：
“Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英。Praesent aliquam，justo convallis luctus rutrum，erat nullafermentum diam，在 nonummy quam ante ac quam。Maecenas urna purus，fermentum id，molestie，commodo portitor。 lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et potenti
...CSS 仅导致以下文本显示在 DIV 中：
“Lorem ipsum dolor 坐 amet，consectetuer adipiscing …
好的,这是一个例子:http: //jsfiddle.net/jGLvk/405/
如果您将9012菜单悬停,则会有切片下拉的子菜单,这是绝对的.删除位置:绝对或溢出:隐藏任何父母:你将有正常的工作下拉菜单.
"溢出-y:可见"只会生成滚动条而不是显示菜单.
请帮我!我需要在这些棘手的祖先中使用常规的超级鱼下拉菜单.
谢谢!
我有三个人div在容器内的所有方向上使用CSS3翻译,该容器div本身在外部全屏内div.最外面div的全屏幕perspective设置在它上面.
HTML
<div class='outer'>
<div class='container ofhidden'>
<div class='item' id='item1'></div>
<div class='item' id='item2'></div>
<div class='item' id='item3'></div>
</div>
</div>
CSS
.outer {
perspective: 1000;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.outer .container {
background-color: grey;
width: 130%;
height: 100%;
padding: 1em;
}
.outer .container.ofhidden {
overflow: hidden;
}
.outer .container .item {
border: 1px solid black;
width: 50px;
height: 50px;
}
.outer .container .item#item1 {
background-color: green; …当消息框"悬停"时,我有这个代码可以显示工具提示.所有消息框都在一个名为chatbox的div中.
$('.box').hover(function(){
var htmltooltip = '<div id="info" class="shadow">';
htmltooltip += '<h4>Label info</h4>';
htmltooltip += '<img src="images/defaultphoto.gif"/>';
htmltooltip += '</div>';
$(this).append(htmltooltip).children('#info').hide().fadeIn(400).css('left', -150);
}, function() {
$('#info').remove();
}
);
这是我的名为#info的聊天框,框和工具提示的css代码
#chatbox {
position: absolute;
overflow-y:auto;
top:40%;
left:50%;
background:#fff;
height:80%;
width:550px;
border:3px solid black;
}
.box{
width:90%;
height:auto;
margin:5px 20px 0px 0px;
border:3px solid #918750;
float:left;
cursor: pointer;
}
#info{
position:absolute;
display:block;
background:#7F7777;
width:300px;
padding-bottom: 0.5em;
z-index:25;
}
我的问题是,当通过聊天框的限制时,聊天框div会切断工具提示.这是一个jsfiddle:http://jsfiddle.net/Ifalcao/k9Yrc/2/
聊天框div中的溢出规则必须存在,否则如果我有许多消息框,它们将通过聊天框的限制.(http://jsfiddle.net/Ifalcao/URBDE)我需要聊天框内的消息框,但是聊天框外面的消息框的工具提示.
提前致谢.
现场演示: http ://codepen.io/flanker/pen/ajAow
有三个要素,如:
<div class="parent">
<div class="child"></div>
</div>
在第一个父项中,一个border-radius和子元素将溢出.在第二个父母有一个border-radius,overflow: hidden所以孩子被剪裁.他们两个都很好.
但在第三个中,父元素具有border-radius和overflow: hidden.这次我animation在子元素中添加了一个,然后overflow: hidden在Chrome中无效(版本28.0.1500.52 beta/Mac OS X 10.8.3).从父元素中可以看到子元素.
但它在Firefox(20.0)中运行良好
这是Chrome错误吗？或者我错过了任何其他CSS属性？
谢谢.
这里发生了什么事 ？
#agendaTitle{
margin:0;
padding:20em 0em 0em 0.75em;
height:3em;
overflow:hidden;
background-color:#ff00ff;
}
顶部填充是非常高的只是为了证明 - 有了现实的要求div仍然按比例增加高度.
当然,overflow:hidden我应该看到一块颜色的手段？在FF和IE中发生
这就是我现在所拥有的,看看stackoverflow无处不在,所有的解决方案都没有为我工作:(问题是,我使用draggable和resizable一些元素等图片,这是容器中有溢出属性的地方.问题来了有了draggable,我希望不要将该对象移动到页面顶部的图片上,但是元素总是位于顶部的图片下面.如果我首先调整大小,我可以将元素移到图片上,之后没有变化:(另一个问题是我首先要调整大小,第二个对象来到那个元素,只是重叠它？
我已经为这两个修复尝试了很多解决方案,但没有运气.这就是我现在所拥有的
CSS
#zidomotac{
width:100%;
}
#myWorkContent{
width:100%;
overflow-x: scroll;
white-space: nowrap;
box-sizing:border-box;
margin-bottom:20px
}
.slikezamenjanje{
width: 100px;
float:left;
display: inline-block;
vertical-align: middle;
}
.slikezamenjanje img{
max-height: 120px;
overflow:hidden;
width: 100%;
}
外部
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
功能
<script type="text/javascript">
$(document).ready(function() {
$('.slikezamenjanje').draggable().resizable({
aspectRatio: 16 / 9,
});
});
</script>
HTML
<div id="zidomotac"><img src="http://www.vectorimages.org/09/0920100513111825424.jpg"></div>
<div id="myWorkContent">
<div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>
<div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>
</div>
</div>
这是工作jsfiddle http://jsfiddle.net/gorostas/CS93M/ 我希望有人能找到解决方案
EDITED
也许我可以首先调用可调整大小然后内部可拖动？
UPDATE
如果我像这样使用拖拽
$(document).ready(function() {
$(".slikezamenjanje").draggable({
revert: "invalid" …我在实现嵌套网格结构时遇到了问题。这是一个简化的例子。正如你所看到的，嵌套结构给出了外部结构的高度，从而在身体之外生长。我想要实现的是使.content__inner元素，并且只有该元素可滚动。其他一切都应该在视口内。我怎样才能做到这一点？
编辑 1： 只是为了澄清，我在身体上使用 100vh，但不想将它设置在容器上。容器应该具有其父级的高度，无论它是什么。
body {
display: block;
height: 100vh;
width: 100%;
background-color: white;
margin: 0;
}
.container {
max-height: 100%;
display: grid;
grid-template-areas: "header header" "side content" "footer footer";
grid-template-columns: 50px auto;
grid-template-rows: min-content minmax(min-content, max-content) min-content;
}
.header {
grid-area: header;
background-color: rgba(255, 255, 0, 0.3);
}
.side {
grid-area: side;
background-color: rgba(0, 255, 0, 0.3);
}
.content {
grid-area: content;
background-color: rgba(0, 0, 255, 0.3);
}
.overflow {
overflow: auto;
}
.content-item …我有带有子 div 的可滚动 div 。有没有办法显示整个孩子（也在可滚动 div 之外）？现在，overflow-x: scroll就像overflow-x: hidden滚动条一样。我想要overflow-x: visible带有滚动条。这是小提琴。
.container {
margin: 0 auto;
overflow-x: scroll;
width: 300px;
}
.child {
background-image: linear-gradient(to left, blue, green);
height: 100px;
width: 600px;
}
.containerExample {
background-image: linear-gradient(to left, blue, green);
margin: 0 auto;
overflow-x: visible;
width: 600px;
}
.childExample {
border: 1px solid red;
height: 100px;
margin: 0 auto;
width: 300px;
}Now:
<div class="container">
<div class="child">
</div>
</div>
What I want (red …