overflow 相关问题

溢出是一个CSS属性,它控制内容溢出其包含框时会发生什么。

VBA-Excel 为什么长数据类型在 64 位之前溢出?

如果我搜索“VBA long”,它会告诉我 long 可以存储最多 2^63 - 1 的数字。但是我收到高于 2^31 - 1 的错误。在下面的代码中,我分离出了我的 3 次尝试转换...

回答 1 投票 0

CSS 溢出-y:可见,溢出-x:滚动

我在搜索中看到过一些类似的问题,但问题要么没有得到正确回答,要么没有给出答案。 那么,我再问一下。 .parent { 溢出-y:滚动;溢出...</desc> <question vote="49"> <p>我在搜索中看到过一些类似的问题,但问题要么没有得到正确回答,要么没有给出答案。 那我再问一下吧</p> <pre><code>&lt;style&gt; .parent { overflow-y:scroll; overflow-x:visible; width:100px; } .child { position:relative; } .child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } &lt;/style&gt; &lt;div class=&#34;parent&#34;&gt; &lt;!-- Lots of the following divs --&gt; &lt;div class=&#34;child&#34;&gt; Text Line &lt;div class=&#34;child-menu&#34;&gt;some pop out stuff&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>好吧,这只是一个例子。但基本上,我想要完成的是让 .child 类在 y 轴上可滚动...上下滚动。 但我希望 x 轴......子菜单在 .parent 容器外部可见。</p> <p>这有道理吗? 因此,当页面呈现时,浏览器将溢出完全解释为自动,而不考虑单独的轴。 我是否做错了什么,或者浏览器在这方面还没有达到 CSS3 规范? 大部分只在 Chrome 上进行了测试。 <img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvblFDMFgucG5n" alt="enter image description here"/></p> </question> <answer tick="true" vote="39"> <p>我明白了!</p> <p>父级应该是overflow:auto; .child 应该是position:relative; .child-menu 应该是position:fixed; <strong>NO</strong> 顶部或左侧定位。 如果您这样做,它将使其与内容保持一致。</p> <p>如果您需要移动子菜单,请使用边距,而不是顶部或左侧。示例 margin-left:-100px;</p> <p><strong>编辑</strong></p> <p>由于人们似乎仍在使用此功能,请注意,您必须使用 javascript 在页面滚动时移动固定项目。</p> </answer> <answer tick="false" vote="5"> <p>到这里就解决了! 他们使用 css 和 JS。</p> <pre><code>.child:hover .child-menu { display: block; } .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px } .child { position:static; } .child-menu { position:absolute; display:inline-block; display: none; } </code></pre> <p><a href="https://css-tricks.com/popping-hidden-overflow/" rel="noreferrer">https://css-tricks.com/popping-hidden-overflow/</a></p> <p><a href="https://jsfiddle.net/68fBE/2/" rel="noreferrer">https://jsfiddle.net/68fBE/2/</a></p> </answer> <answer tick="false" vote="-1"> <pre><code>.parent { overflow-y: auto; width: 100px; } .child-menu { display: block; position: fixed; top: auto; left: auto; } </code></pre> </answer> </body></html>

回答 0 投票 0

如何使用 Tampermonkey 更改“max-h-80 Overflow-y-hidden”内的“最大高度”?

显然,我第一次尝试使用 Tampermonkey 时一直在挣扎。 Bato.to 评论部分仅加载 PC 上图像的前 280 个左右像素,我想将其加倍以获得

回答 1 投票 0

如何使工具提示溢出并在溢出:隐藏的父容器外部正确显示?

我有一个 div 元素的嵌套结构,其中最里面的子元素包含工具提示。父容器(父类)具有CSS属性overflow:hidden。然而,当鼠标悬停在...

回答 1 投票 0

Chakra UI:需要有关可滚动选项卡内容的帮助

在 Chakra UI 版本 2 中,我有以下选项卡组件,其内容溢出而不是可滚动: 函数应用程序(){ 返回 ( 在 Chakra UI 版本 2 中,我有以下 Tabs 组件,其内容溢出而不是可滚动: function App() { return ( <ChakraProvider> <Box width={300} height={300} borderWidth={2} borderRadius="lg" margin={4} padding={2} > <Flex direction="column"> <Box flex="1"> <Tabs height="full" display="flex" flexDirection="column"> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanels overflowY="scroll"> <TabPanel> <Text>Content for Tab 1</Text> </TabPanel> <TabPanel> <LoremIpsum /> </TabPanel> </TabPanels> </Tabs> </Box> </Flex> </Box> </ChakraProvider> ); } 结果如下所示: 如果删除 Flex 和围绕 Box 组件的内部 Tabs 组件,代码实际上将起作用: function App() { return ( <ChakraProvider> <Box width={300} height={300} borderWidth={2} borderRadius="lg" margin={4} padding={2} > {/*<Flex direction="column">*/} {/*<Box flex="1">*/} <Tabs height="full" display="flex" flexDirection="column"> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanels overflowY="scroll"> <TabPanel> <Text>Content for Tab 1</Text> </TabPanel> <TabPanel> <LoremIpsum /> </TabPanel> </TabPanels> </Tabs> {/*</Box>*/} {/*</Flex>*/} </Box> </ChakraProvider> ); } 但是,这两个组件源自代码的其他部分,我添加它们只是为了创建一个最小的工作示例并缩小问题范围。不幸的是,它们无法删除。 造成这些问题的原因以及如何解决这些问题? 单击此处获取工作副本(需要大约 30 秒的时间来加载)。 (感谢提前的任何答复,这已经困扰我很长一段时间了。) 需要确保所有父组件都指定了它们的高度。具体来说,一旦将 height="full" 属性添加到第二个示例中已删除的 Flex 和 Box 组件中,布局问题就会解决,选项卡内容确实会滚动: function App() { return ( <ChakraProvider> <Box width={300} height={300} borderWidth={2} borderRadius="lg" margin={4} padding={2} > <Flex height="full" direction="column"> <Box height="full" flex="1"> <Tabs height="full" display="flex" flexDirection="column"> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanels overflowY="scroll"> <TabPanel> <Text>Content for Tab 1</Text> </TabPanel> <TabPanel> <LoremIpsum /> </TabPanel> </TabPanels> </Tabs> </Box> </Flex> </Box> </ChakraProvider> ); }

回答 1 投票 0

防止 CSS 网格列重叠

我对 CSS 相当陌生,并且总是遇到布局问题。 我一直在尝试实现一些网格布局,但在折叠浏览器时遇到了麻烦。 我有 2 列设置为 40% 60%

回答 1 投票 0

翻页卡样式的卡片前部 div 不使用鼠标滚轮滚动 - 显示滚动条,但除非单击,否则无法向下滚动

我有一个“翻转卡”设计,正面 div 上有图像,背面 div 上有文字。卡的背面可让您使用鼠标滚轮向下滚动。卡的正面...

回答 1 投票 0

强制div具有背景图像的大小

在 Div 上使用背景图像时,我无法显示图像的完整高度,也无法使用 height:auto;或高度:100%。为什么会这样呢? 我该如何解决这个问题? 我创建了一个 JS F...

回答 8 投票 0

当父级溢出时,下拉菜单会被切断

我创建了一个下拉菜单,我使用了我的真实项目源代码,这样就不会有混淆:- .主容器{ 溢出-x:自动; } div.btn-dropdown-options { 字体系列:&quo...

回答 3 投票 0

隐藏多行div中部分溢出的文本?

如何删除或隐藏部分溢出的文本行?例子: 网页: 这个多行框中有很多有趣的文本,但如何删除或隐藏最后一行 CSS: 分区...

回答 3 投票 0

如何在Angular中使用overflow:hidden只显示一页?

我想让我的窗格不可滚动。如果我将元素设置为溢出:隐藏,我无法在任何页面上滚动,所以我尝试在我想要取消滚动的组件的CSS文件中执行此操作...

回答 3 投票 0

为什么overflow-x:hidden 会剪辑我的下行部分?

我想要一个带有overflow-x:hidden 和overflow-y:visible 的标题元素。然而,由于某种原因,overflow-y 属性似乎没有被遵守。您可以在这里观察到这一点(在

回答 3 投票 0

使用溢出时的文本裁剪:隐藏

我有这个简单的html和css http://jsfiddle.net/JVfVv/1/ 问题是文本在 mac 上的 safari/chrome/firefox 下被裁剪。删除溢出:隐藏可以纠正问题,但是这...

回答 3 投票 0

如何获取“overflow-x: auto;”内元素的全宽地区?

我编码如下: $(文档).ready(函数() { $(“按钮”).click(函数() { Alert("#text 的宽度:" + $("#text").width()); }); }); * { 保证金:0; 填充:0; 字体系列:sans-s...

回答 2 投票 0

为什么这个特定操作在 C# 中会溢出(参见 CS0220)?

我尝试构造一个大的 Int64,其中半字节信息以字节存储。 以下代码行按预期工作: Console.WriteLine("{0:X12}", (Int64)(0x0d * 0x100000000)); 控制台.WriteLine(...

回答 3 投票 0

Overflow-y auto 使overflow-x 剪辑不可见

我正在尝试为卡片创建一个滚动容器,其中滚动仅在卡片内容中执行,而不是在页眉或页脚中执行。我想容器应该隐藏水平溢出...

回答 1 投票 0

Shadcn 选择在页面底部创建不必要的空白

根据我放置选择组件或任何使用弹出器的组件的位置,它会在页面底部创建不必要的空白。选择位于具有自定义溢出的 div 中...

回答 1 投票 0

溢出块、溢出和块溢出有什么区别?

来自文档: 溢出: 溢出速记 CSS 属性设置当元素的内容太大而无法适应其块格式上下文时要执行的操作。 溢出块 溢出块 CSS

回答 2 投票 0

‘overflow-block’和‘overflow’(和‘block-overflow’)有什么区别?

来自文档: 溢出: 溢出速记 CSS 属性设置当元素的内容太大而无法适应其块格式上下文时要执行的操作。 溢出块 溢出块 CSS

回答 2 投票 0

为什么 C# 编译器不会因为这种明显的“糟糕”转换而抱怨溢出?

我无法理解为什么下面的代码可以编译。 公共无效溢出() { Int16 = 32767; s = (Int16) (s + 1); } 在编译时,很明显 (s+1) 不再是 Int16,因为我们...

回答 4 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.