草庐IT

css - 视口(viewport)宽度导致背景无法按预期显示

coder 2023-08-10 原文

我遇到了一个问题，当视口(viewport)缩小到小于为我的某些元素指定的尺寸时，背景颜色会出现意外行为。虽然滚动条显示正确，但背景不是我所期望的。当视口(viewport)与预期一样大或更大时，背景会按预期运行。当用 Firebug 检查页面元素时，似乎 body 元素没有拉伸(stretch)，即使它里面的内容是。是什么导致背景出现这种行为？

我已经提供了我认为相关的 html 和 CSS，但如果我遗漏了什么，请告诉我。

缩小视口(viewport)示例

放大的视口(viewport)示例

CSS

html
{
    background: #A37C45;
}

body
{
    background:
      #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}

#container
{
    width: 100%;
}

#header
{
    width: 730px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    overflow: hidden;
}

#main
{
    width: 730px;
    margin-top: 2px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#footer
{
    background:
      url("../images/backgrounds/grass.png") repeat-x scroll left top;
    clear: both;
    width: 100%;
    overflow: hidden;
    padding-top: 30px;
    margin-top: 20px;
}

#footercontainer
{
    width: 100%;
    background-color: #A37C45;
    margin-top: -1px;
}

#footercontent
{
    width: 730px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 25px;
    overflow: hidden;
}

HTML

<html>
  <body>
    <div id="container">
      <div id="header">
      </div>
      <div id="main">
      </div>
    </div>
    <div id="footer">
      <div id="footercontainer"> 
        <div id="footercontent">
        </div>
      </div>
    </div>
  </body>
</html>

最佳答案

您看到此行为的原因是因为您的 width: 100% 元素仅将视口(viewport)宽度作为它们需要渲染的背景量。

您可以通过添加 min-width declaration 来修复它到您的 body 元素的 CSS。只需将其设置为最大嵌套元素的宽度即可:

body {
    min-width: 730px;
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}

关于css - 视口(viewport)宽度导致背景无法按预期显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3754057/

viewportcssstrongcodemarginhtml

有关css - 视口(viewport)宽度导致背景无法按预期显示的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  5. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  6. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  7. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  8. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  9. 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并在看到包时选择

  10. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

随机推荐