html - DIV 设置为溢出 :scroll, 但不会一直滚动到底部

coder 2023-08-02 原文

我有一个 DIV 菜单，该菜单设置为 100% 高度并带有 overflow:scroll。在 DIV 中，我有一个 ul li。我遇到的问题是它不会让我一直向下滚动以查看最后一个 li。我几乎看不到它。

我认为这与我的标题有关，因为当我删除标题时，我可以看到它。当我放回标题时，它位于浏览器下方，无法一直向下滚动以查看最后一个 li。

li 和 header 的高度几乎相同， header 导致问题很有意义。我认为，不是特别是标题，而是我在 CSS 中所做的更多事情。

为什么我不能一直滚动到底部？解决方案是什么？

此处示例:http://jsfiddle.net/D5KU3/2/

<div class="container">

<!--header-->
 <div class="header">
 </div>
<!--end header-->

<!--left-->
 <div class="left">

<!--ul starts here-->

  <ul>

  <li class="hybrid">

    <a href="#">
    <p class="title">Why Cant</p>
    <p class="type">I scroll all the way to the bottom</p></a>

  </li>

重复 li 20 次

  </ul> <!--ul ends here-->

  </div> <!--container ends here-->

CSS

  body, html {
  height:100%;  
  }

  body {
  background:white;

  }

  .container {
  width:260px;
  height:100%;
  overflow:hidden;
  background:silver;
  margin:0 auto;
  font-family:sintony;
  }

  .header {
  width:100%;
  height:60px;
  background:#000;
  }

  .left {
  width:260px;
  height:100%;
  background:#fff;
  float:left;
  overflow:scroll;
  }


 li.hybrid a {
 display:block;
 background:#16BF14;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }



 li.purple a {
 display:block;
 background:#3370CC;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }

 p.title {
 position:relative;
 padding-left:10px;
 }

 p.type {
 font-size:12px;
 position:relative;
 padding-left:10px;
 }

 ul {
 margin:0;
 padding:0;
 }

 li p {
 margin:0;
 padding:0;
 list-style-type:none;
 }

最佳答案

由于您在容器中同时拥有 class="header" 和 class="left" 元素，并且 class="left" 元素是容器的 100%，它们是 100% 加上 60 像素。

您可以通过在容器中使用 box-sizing 和 padding-top 为标题腾出空间。这将使容器的内部尺寸为 100% 减去 60 像素。然后在页眉上使用负上边距将其放置在该填充的顶部:

.container {
    box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    padding-top: 60px;
}

.header {
    margin-top: -60px;
}

演示:http://jsfiddle.net/Guffa/D5KU3/11/

您可能还想去掉页边距，否则 100% 容器和边距比窗口高:

body {
    margin: 0;
    padding: 0;
}

关于html - DIV 设置为溢出 :scroll, 但不会一直滚动到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20168936/

到底 scroll strong code padding html css html-lists overflow

有关html - DIV 设置为溢出 :scroll, 但不会一直滚动到底部的更多相关文章

ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby-openid:执行发现时未设置@socket - 2
我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - Highline 询问方法不会使用同一行 - 2
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？最佳答案
ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？最佳答案我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2
我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？最佳答案试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问
ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

html - DIV 设置为溢出 :scroll, 但不会一直滚动到底部

有关html - DIV 设置为溢出 :scroll, 但不会一直滚动到底部的更多相关文章

随机推荐