css - 在移动设备/平板电脑上从横向更改为纵向时出现空白问题-6ren

css - 在移动设备/平板电脑上从横向更改为纵向时出现空白问题

转载作者：行者123 更新时间：2023-11-28 05:15:39

25

4

我正在为个人元素工作的网站需要一个大背景图像(全屏)，下面是我的容器 div <main>。，用户向下滚动屏幕，这个容器 div 覆盖大背景图像，直到用户到达页面底部 <footer> .

这在任何屏幕尺寸上都能完美运行但只能在横向 View 下运行，现在我知道这是因为 <main>通过将 body height css 设置为 100%，div 设置为仅出现在屏幕外，但这会导致在纵向 View 中查看时出现问题，因为这将推送 <main>。 div 一直到屏幕底部，在背景图像下方留下一个我不想要的巨大空白。

我是否必须运行媒体查询来解决这个问题？..(我宁愿不这样做，因为媒体查询很棒，但它们并没有真正考虑到用户通过拖动边缘来调整屏幕大小)，或者我是否遗漏了一些东西我的 css 还是最终可以通过 javascript 修复？

更多信息:Bootstrap v3.3.7， https://blackrockdigital.github.io/startbootstrap-scrolling-nav/

CSS:

body {
    width: 100%;
    height: 100%;
}
html {
    width: 100%;
    height: 100%;
}
/* div holding the background image */
.mainbg {
    background-image: url("../images/main_image.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% auto;
    height: 100%;
}

html:

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
   <div class="mainbg"></div>

    <main role="main">
       <!-- Intro Section -->
    <section id="intro" class="intro-section mobile-block">
        <div class="container-fluid">
            <div class="col-lg-12">
              <h1>Stack Overflow Question</h1>
            </div>
              <div class="row">

最佳答案

我认为您发布的代码不足以让我为您提供一个工作示例，但总体思路是您可以使用媒体查询根据视口(viewport)宽度修改 css。

也许它可以像这样简单

@media (max-width: 767px) {   /* adjust breakpoint as req'd */
   .mainbg {
     height:75%;   /* adjust as req'd, could be % or sometimes pixel value is easier to work with on narrow viewports  */
   }
}

或者您可能需要使用多个媒体请求来定位不同的视口(viewport)

@media (max-width: 767px) {
       .mainbg {
         ....
       }
    }    

 @media (max-width: 480px) {
       .mainbg {
         ...
       }
    }

或者偶尔稍微复杂一点的媒体查询，比如

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .mainbg {
     ...
   }
        }

请记住，通常的 CSS 级联规则适用，因此请注意确保顺序或您的媒体查询正确，并将这些规则放在样式表中的正确位置。

Do i have to run media queries to solve this?.. (i would sooner not as media queries are great but they dont really account for user resizing screen by dragging the edges around), or am i missing something in my css or finally can it be fixed via javascript?.

您可以使用 javascript 来完成，作为一般规则，使用 CSS 解决它会更容易。如果您使用媒体查询，则用户调整屏幕大小没有问题，它将起作用。

希望这对您有所帮助!

关于css - 在移动设备/平板电脑上从横向更改为纵向时出现空白问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39329198/

25

4

0

文章推荐： html - 倾斜的 Div - 仅右侧

文章推荐： javascript - 根据 Jquery 框中提到的文本更改类名称

文章推荐： html - 类选择器及其效果

javascript - AngularJS，Ng-repeat 更改/更改 Json 数组的顺序
SO亲爱的 friend 们: 2014 年 3 月 18 日。我正在处理一种情况，在使用 ng-repeat 时，数组内的元素(我从 Json 字符串中获取)更改了原始顺序。需要明确的是，数组中的
javascript - 更改 div 类 onclick --- 并*保存*更改
有很多问题询问如何在 JavaScript 单击处理程序中更改 div 的类，例如，此处:Change Div style onclick .我理解得很好(只需更改 .className)，并且它有效
java - 无法删除、更改、更改...列名称 'number of shares' 带空格
我从access导入了一个数据库到mysql，但其中一个表的列名“股数”带有空格，但我尝试更改、替换甚至删除列名，但失败了。任何人都可以帮助解决这一问题 String UpdateQuary = "U
javascript - iframe css src 更改，如果父 css src 更改
我正在做一个随机的学校元素。目前，我有一个包含两个 CSS 的页面。一种用于正常 View ，一种用于残障人士 View 。此页面还包括两个按钮，它们将更改使用的样式表。 function c
javascript - 更改
文本中的文本我会使用 javascript 更改
元素
我需要使用 javascript 更改 HTML 元素中的文本，但我不知道该怎么做。 ¿有什么帮助吗？我把它定义成这样: Text I want to change. 我正在尝试这样做: docum
javascript - 当我通过 Javascript 更改 ID 的 CSS 类时，我的 jQuery 导航栏没有反射(reflect)更改..？
我在它自己的文件 nav_bar.shtml 中有一个主导航栏，每个其他页面都包含该导航栏。这个菜单栏是一个 jQuery 菜单栏(ApyCom 是销售这些导航栏的公司的名称)。导航栏上的元素如何确定
更改 if 语句
我正在摆弄我的代码，并开始想知道这个变化是否来自: if(array[index] == 0) 对此: if(!array[index] != 0) 可能会影响任何代码，或者它只是做同样的事情而我不需
更改 Windows 控制台大小
我一直在想办法调整控制台窗口的大小。这是我正在使用的函数的代码: #include #include #define WIDTH 70 #define HEIGHT 35 HANDLE wHnd;
vba - 更改 IF 语句以提高效率
我有很多情况会导致相同的消息框警报。有没有比做几个 if 语句更简单/更好的解决方案？ PRODUCTS BOX1 BOX2 BOX3
c# - 更改/重命名命名空间前缀
我有一个包含这些元素的 XELEMENT B Bob Petier 19310227 1 我想像这样转换前缀。 B Bob Pet
mysql - 更改 where 子句的顺序会破坏查询
我使用 MySQL 5.6 遇到了这种情况: 此查询有效并返回预期结果: select * from some_table where a = 'b' and metadata->>"$.countr
r - 检测日期列格式的中断/更改
我想知道是否有人知道可以检测 R 中日期列格式的任何中断的包或函数，即检测日期向量格式更改的位置，例如: 11/2/90 12/2/90 . . . 15/Feb/1990 16/Feb/1990 .
更改 GtkButton 的标签
我希望能够在小部件显示后更改 GtkButton 的标签 char *ButtonStance == "Connect"; GtkWidget *EntryButton = gtk_button_ne
更改 C 中缓冲区的播放速率？
我正在使用 Altera DE2 FPGA 开发板并尝试使用 SD 卡端口和音频线路输出。我正在使用 VHDL 和 C 进行编程，但由于缺乏经验/知识，我在 C 部分遇到了困难。目前，我可以从 SD
java - 更改 JProgressBar
注意到这个链接后: http://www.newscientist.com/blogs/nstv/2010/12/best-videos-of-2010-progress-bar-illusion.h
Ansible:更改=0
我想知道在某些情况下，即使剧本任务已成功执行并且 ok=2，ansible 也会显示“changed=0”。使用 Rest API 和 uri 模块时会发生这种情况。我试图找到解释但没有成功。谁能告诉
iphone - 更改/删除远程通知上的按钮或按钮文本
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: add buttons to push notification alert 是否可以在远程通知显示的警报框中指定有
iphone - 更改 "More"选项卡的导航栏颜色？
当您的 TabBarController 中有超过 5 个 View Controller 时，系统会自动为您设置一个“更多” View 。是否可以更改此 View 中导航栏的颜色以匹配我正在使用的颜
path - 更改.AndroidStudioBeta文件夹的位置
如何更改.AndroidStudioBeta文件夹的位置，默认情况下，该文件夹位于Windows中的\ .. \ User \ .AndroidStudioBeta，而不会破坏任何内容？ /编辑：找
Scala:收集不可变状态的更新/更改
我目前正在尝试将更具功能性的编程风格应用于涉及低级(基于 LWJGL)GUI 开发的项目。显然，在这种情况下，需要携带很多状态，这在当前版本中是可变的。我的目标是最终拥有一个完全不可变的状态，以避免状

首页

博学

6Ren·AI

商城