html - 网站页眉导航栏和页脚不会在移动设备上达到 100%-6ren

html - 网站页眉导航栏和页脚不会在移动设备上达到 100%

转载作者：太空宇宙更新时间：2023-11-04 16:26:13

我创建了这个网站 http://fusioninfinite.com/DianeFH/希望它能在移动设备上正确显示。虽然它在我的 PC 上看起来不错，但我已经在我的 iPod 上对其进行了测试，当您滚动时，页眉、导航栏和页脚背景颜色不会扩展到页面的其余部分。我认为这是宽度为 100% 的问题，但我不确定

这是我使用 Bootstrap 的 HTML 代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Diane Swanson&#039;s website, online gallery and blog">
    <meta name="author" content="Diane Swanson">
    <meta name="keywords" content="diane, swanson, Diane Swanson, artist, freehawk art, art, freehawk, watercolor, visual artist, American Women Artists, artist, painting, landscapes">
    <link rel="icon" href="../../favicon.ico">
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
    <title>Diane Swanson - Home</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="blog.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div style="width:100%; background-color:#303030; class="blog-masthead">
    <div align="center" style="width:100%; height:120px; background-color:#0b0b3b;">
    <div style="width:740px; padding-top:40px;" align="left">
      <h1 style="font-size:45px; font-family: 'Muli', sans-serif; color:lightgrey;">Diane Swanson</h1>
      </div>
      </div>
      <div style="width:790px;" align="left" class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="index.html">Home</a>
          <a class="blog-nav-item" href="about.php">About</a>
          <a class="blog-nav-item" href="exhibits.html">Current & Upcoming Exhibits</a>
          <a class="blog-nav-item" href="portraits.html">House Portraits</a>
          <a class="blog-nav-item" href="gallery.html">Gallery</a>
          <a class="blog-nav-item" href="wordpress/index.php">Blog</a>
        </nav>
      </div>
    </div>

    <div class="container">

    <div style="margin-top:20px;" align="center">
    <img src="images/homeheader.jpg">
    <br><br><br>
    <h2 style="float:left; color:#000066;"><strong>DIANE SWANSON</strong></h2>
    <h2 style="float:right; color:#000066; font-style: italic;">visual artist</h2>
    <br><br><br>
    <h4>Landscapes   —      Home/Building Portraits   —      Animal Portraits   —       Illustration</h4>
    <br><br><br>
    </div>

    </div><!-- /.container -->

    <div style="left:0; right:0;" class="blog-footer">
      <p>Website designed and hosted by <a href="http://fusioninfinite.com">FusionInfinite WebDesign and Hosting</a></p>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/docs.min.js"></script>
  </body>
</html>

这是我的 CSS:

/*
 * Globals
 */

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #555;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333;
}


/*
 * Override Bootstrap's default container.
 */

.container {
  width: 790px;
}


/*
 * Masthead for nav
 */

.blog-masthead {
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

/* Nav links */
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
  color: #fff;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}


/*
 * Blog name and description
 */

.blog-header {
  padding-top: 20px;
  padding-bottom: 20px;
}
.blog-title {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 60px;
  font-weight: normal;
}
.blog-description {
  font-size: 20px;
  color: #999;
}


/*
 * Main column and sidebar layout
 */

.blog-main {
  font-size: 18px;
  line-height: 1.5;
}

/* Sidebar modules for boxing content */
.sidebar-module {
  padding: 15px;
  margin: 0 -15px 15px;
}
.sidebar-module-inset {
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
  margin-bottom: 0;
}



/* Pagination */
.pager {
  margin-bottom: 60px;
  text-align: left;
}
.pager > li > a {
  width: 140px;
  padding: 10px 20px;
  text-align: center;
  border-radius: 30px;
}


/*
 * Blog posts
 */

.blog-post {
  margin-bottom: 60px;
}
.blog-post-title {
  margin-bottom: 5px;
  font-size: 40px;
}
.blog-post-meta {
  margin-bottom: 20px;
  color: #999;
}


/*
 * Footer
 */

.blog-footer {
  padding: 40px 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

最佳答案

为了使您的网站具有响应性，您使用了 Bootstrap，它很棒，但您使用不当。通过覆盖 bootstrap 的默认 CSS，它只会破坏它，正如我之前所说的。您要做的是包含您自己的 DIV 或自定义类，并将 CSS 应用于它们。

说到 CSS，我建议避免在样式属性中使用内联 CSS，并将所有 CSS 重新组合到一个样式表中。以后编辑网站会更容易。在我的示例中，我添加了很多自定义类。

此外，不要使用 BR 标签，除非在 P 标签内为文本换行。为了定义元素周围的空间，使用 MARGIN 或 PADDING

接下来，我注意到您将网站内容或本例中的内容容器压缩为 790 像素。如今，大多数屏幕分辨率往往在 1920px 和 1280px 之间，当然不包括手机和平板电脑的分辨率。通过压缩，您将:1) 破坏 Bootstrap ，2) 将您的内容包含在页面中间，因此为使用更高分辨率屏幕的用户在两侧留下巨大的空白。

使用 bootstrap 很棒，但更有效地使用它更好。不要害怕充分发挥 Bootstrap 的潜力。在查看我对 Html 的看法时，请注意我是如何滥用 DIV 容器并添加所有 boostrap 自己的行和列 DIV 的。调整浏览器窗口大小时，您会注意到当没有更多空间让元素并排放置时，所有元素都将跟随并彼此重叠。

在样式表中，我添加了一些媒体查询。这个做的很简单，它检查浏览器的宽度是否达到我指定的阈值。如果是这样，我可以针对特定元素并应用其他 CSS 样式。如果浏览器的宽度恢复正常，则移除额外的 CSS。

出于某种未知原因，我目前无法为您创建 Bootply 示例。但是您可以尝试通过添加我的代码来测试它，然后单击“播放”以查看它的外观以及对调整大小的 react 。 Bootply Website

如有任何疑问，请不要犹豫

这是完整的 html:

<div class="header">
    <div class="container name-container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h1>Diane Swanson</h1>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <nav class="blog-nav">
                    <ul>
                        <li><a class="blog-nav-item active" href="#">Home</a></li>
                         <li><a class="blog-nav-item" href="#">About</a></li>
                         <li><a class="blog-nav-item" href="#">Current & Upcoming Exhibits</a></li>
                         <li><a class="blog-nav-item" href="#">House Portraits</a></li>
                         <li><a class="blog-nav-item" href="#">Gallery</a></li>
                         <li><a class="blog-nav-item" href="#">Blog</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="content-container">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <img class="blog-img" src="http://fusioninfinite.com/DianeFH/images/homeheader.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="container middle-container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 leftbox">
                <h2>Diane Swanson</h2>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 rightbox">
                <h2>Visual artist</h2>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 description-container">
                <h4>Landscapes   —      Home/Building Portraits   —      Animal Portraits   —       Illustration</h4>
            </div>
        </div>
    </div>
</div>
<div class="blog-footer">
    <p>Website designed and hosted by <a href="http://fusioninfinite.com">FusionInfinite WebDesign and Hosting</a></p>
</div>

这是 CSS:

.header{
    width: 100%;
    background-color: #303030;
}

.header h1{
    font-size: 45px;
    font-family: 'Muli', sans-serif;
    color: lightgrey;
    margin-left: 8px;
}

.name-container{
    padding-top: 25px;
}

.blog-nav ul{
    margin: 0;
    padding: 0;
}

.blog-nav li{
    float: left;
}

.blog-nav-item{
    position: relative;
    display: inline-block;
    padding: 10px;
    font-weight: 500;
    color: #cdddeb;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.blog-nav-item:hover{
    text-decoration: none;
    color: #FFF;
}

.active{
    color: #fff;
}

.blog-nav .active:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -5px;
    vertical-align: middle;
    content: " ";
    border-right: 5px solid transparent;
    border-bottom: 5px solid;
    border-left: 5px solid transparent;
}

.blog-img{
    max-width: 100%;
    width: 1170px;
}

.content-container{
    padding-top: 25px;
    padding-bottom: 65px;
}

.middle-container{
    padding-top: 10px;  
}

.description-container{
    text-align: center;
    padding-top: 10px;  
}

.leftbox h2{
    color: #000066;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.rightbox h2{
    float: right;
    color: #000066;
    font-style: italic;
}

.blog-footer{
    padding: 40px 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
}

/*MEDIA QUERIES*/
@media only screen and (max-width:770px) {
    .rightbox h2{
        float: none;
    }
}

@media only screen and (max-width:585px) {
    .blog-nav li {
        float: none;
    }

    .blog-nav .active:after{
        display: none;
    }
}

关于html - 网站页眉导航栏和页脚不会在移动设备上达到 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25145777/

文章推荐： javascript - 是否可以重复一个 Angular 平铺背景？

文章推荐： C++类的指针变量

文章推荐： c++ - Zlib 膨胀和收缩错误

文章推荐： javascript - 在 Angular js中获取index.php内容

javascript - 带有嵌套 ionic 导航 View 的 ionic 导航 View 不起作用
ion-nav-view 嵌套有一个奇怪的问题。当我在浏览器中加载应用程序时，我可以看到 URL 正在更改为 /app/menu，但页面上没有出现 menu.html 中的内容。页面是空白的。以下是
BootStrap笔记-导航
运行截图如下：源码如下： CN_TEST1
ReactJS 导航
我正在开发一个示例reactjs应用程序(在学习过程中)。我有一个页面，其中列出了用户列表和一个用于添加新用户的添加按钮。当我单击添加按钮时，我应该导航到用户表单以创建新用户。单击用户表单中的提交
CSS - 导航
我的导航栏中的导航链接有问题。首先，它没有在导航栏中间对齐，如下所示: 另一部分是，我正在使用填充来执行此操作，因此如果我放置除“测试”以外的任何内容或将其放在不同的情况下，等等。它会重复该框。代码预
JavaScript 导航
基本上，我有一个网站，我正在尝试使用 ajax 导航构建它，以便它获取网页并将它们加载到同一页面中。问题是当我正常放入内容时它工作正常但是当我尝试将内容添加到外部文档并从导航中访问它时框拆分你可以在这
CSS 导航？
以下站点左侧菜单的导航使用 CSS 进行鼠标悬停链接。 PVH 当我获取导航代码并将其设为单独的页面时。然后鼠标悬停链接不起作用。可能是什么原因？ Test 最佳答案可能... 对此事有话要说
用双栈实现 Web 导航
一问题描述标准的 Web 浏览器包含在最近访问过的页面中向后和向前移动的功能。实现这些特性的一种方法是使用双栈来跟踪前后移动可以到达的页面。 Web 导航支持下面的命令。后退页面：将当前页面推到
命令按钮上的 JSF 导航
我想有条件地导航到某个页面。如果某些条件为真，我想导航到其他页面，否则我想留在同一页面上。我有类似的东西:- 在 bean.navigate 我有类似的东西:- public String navi
通过按钮的 WPF 导航
问题:有没有办法让按钮在用户控件中表现得像超链接？我已经搜索了几天，但没有找到解决此问题的人。如何使用按钮在 WPF 应用程序中导航？具体来说，如何使用户控件内的按钮在其主机框架中导航？请记住，用户
Android 导航 popBackStack
我尝试使用 Android Navigation 组件并遇到了回栈问题。我有 fragment A，B。我写的: Navigation.findNavController(view).naviga
symfony - 导航，突出显示当前页面
我有一个父布局，并从该子站点派生而来。父级布局具有一个导航，每个导航点代表一个子站点。如何在父布局中突出显示当前查看的子站点？如果看起来如何？最佳答案可能不是最好的选择，但这是基于路由名称的
c# - 在发生之前拦截Blazor服务器端路由/导航
我正在开发Blazor服务器端应用程序。熟悉Blazor的任何人都在左侧的NavBar中填充超链接，并以特殊的CSS类进行装饰。我的问题是，如果任何内容都已编辑，我将试图停止导航并在一个特定页面上显示
Flutter 导航，重新打开页面而不是再次推送
我是 flutter 的新手，我正在开发一个具有多个屏幕的应用程序。我想知道如何阻止 flutter 创建同一路线的多个屏幕，例如我有第1页和第2页，如果我单击按钮导航到第 2 页并再次单击
屏幕上的 MvvmCross 导航
我们的设计师创建了一个类似于上面屏幕的布局。主要思想是创建一个只有一个屏幕的应用程序，当您点击一个按钮时，屏幕的红色部分会发生变化(即 2 个文本框而不是 1 个文本框)。这个应用程序将是一个多平台应
flutter - flutter 导航
有人可以解释为什么从pageE返回时不打印efeioi吗？页面A Navigator.pushNamed(context, PageB.ROUTE).then((onValue) {
带有侧边菜单的 iOS 导航
我需要在 iOS 应用程序中创建一个导航，如下图所示。它包含一个标签栏和一个侧边菜单。问题是正确的导航菜单按钮，应该在所有选项卡中都可见。甚至每个选项卡的所有内部屏幕。当用户从侧面菜单中选择一个
很长的行的 vim 导航
这个问题在这里已经有了答案: Vim: move around quickly inside of long line (8 个答案) 关闭 8 年前。我正在用 vim 编辑一个文本文件，我已经使
java - 如何在谷歌地图上创建从用户位置到用户选择的项目覆盖的路线/导航？
我很困惑，如何执行操作来创建从用户位置到用户选择/点击图钉覆盖层的图钉覆盖层(谷歌位置)的路线/导航。这是我的 map Activity ，它将显示我的 map 。 public class Plac
jQuery Animate - 导航
我正在使用 jQuery 函数 .animate 来一一突出显示导航链接。他们在 ul 中。我可以让它工作，只是想知道是否有一种方法可以缩短我的代码，这样我就不必单独突出显示每个项目。提前致谢 $(d
JavaScript anchor 导航
我正在创建一个带有“ anchor 导航”的网站，就像 Facebook 和谷歌邮件一样。我已经让它工作了，但还不完全。当我加载带有 #contact 之类的页面时，除非我单击它的链接，否则它不会加载

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 网站页眉导航栏和页脚不会在移动设备上达到 100%