html - 内容和侧边栏需要扩展背景，同时保持网格对齐-6ren

html - 内容和侧边栏需要扩展背景，同时保持网格对齐

转载作者：行者123 更新时间：2023-11-28 16:30:41

我有一个内容边栏布局。内容有一种背景颜色，而侧边栏有另一种背景颜色，非常简单。您将在附加源代码的 .centered-example elements 分支中看到此配置。

我面临的问题不仅是模仿 .centered-example 的居中内容网格，而且是“扩展”.content 和 。 sidebar 背景到视口(viewport)的边缘(如 .wrap-left 和 .wrap-right 元素所示)并使其(大部分)保持响应。

这是成品的示例:

代码如下:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style>
            .wrap-left{
                width:66%;
                min-height:500px;
                display:inline-block;
                float:left;
                background-color:rgba(0,0,0,0.48);
            }
            .wrap-right{
                width:34%;
                background-color:rgba(172, 172, 172, 0.48);
                min-height:500px;
                display:inline-block;
                float:left;
            }
            .wrap-left .content{
                max-width:693px;
                width:100%;
                height:100%;
                float:right;
                background-color:transparent;
                /*background-color:rgba(0,0,0,0.48);*/
            }
            .wrap-right .sidebar{
                max-width:347px;
                width:100%;
                height:100%;
                float:left;
                background-color:transparent;
                /*background-color:rgba(172, 172, 172, 0.48);*/
            }
            .centered-example{
                width:100%;
                max-width:1040px;
                height:200px;
                background-color:#000000;
                margin:0 auto;
                clear:both;
            }
            .centered-example .content{
                width:66%;
                height:100%;
                float:left;
                background-color:rgba(0,0,0,0.48);
            }
            .centered-example .sidebar{
                width:34%;
                height:100%;
                float:left;
                background-color:rgba(172, 172, 172, 0.48);
            }
        </style>
    </head>
    <body>
        <div class="wrap-left">
            <div class="content">
                This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.
            </div>
        </div>
        <div class="wrap-right">
            <div class="sidebar">
                This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.
            </div>
        </div>
        <div class="centered-example">
            <div class="content"></div>
            <div class="sidebar"></div>
        </div>
    </body>
</html>

您可以在此处查看实际示例:https://jsfiddle.net/fc1Lxmhs/

如果需要更多说明，请告诉我。类似执行的任何站点示例也很有帮助。

最佳答案

您可以在包含元素(在本例中为主体)上使用 CSS3 渐变伪造扩展背景。

* {
  margin: 0;
  padding: 0;
}

body {
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #D7D7D7), color-stop(50%, #858585));
  background: -webkit-linear-gradient(right, #D7D7D7 50%, #858585 50%);
  background: -moz-linear-gradient(right, #D7D7D7 50%, #858585 50%);
  background: -o-linear-gradient(right, #D7D7D7 50%, #858585 50%);
  background: linear-gradient(right, #D7D7D7 50%, #858585 50%);
}

.wrapper {
  width: 1040px;
  min-height: 700px;
  margin: 0 auto;
  overflow: hidden;
}

.content {
  width: 66%;
  float: left;
  min-height: 700px;
  background: #858585;
}

.sidebar {
  width: 34%;
  float: right;
  min-height: 700px;
  background: #D7D7D7;
}

<body>
  <div class="wrapper">
    <div class="content">
      This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.This is the content.
    </div>
    <div class="sidebar">
      This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.This is the sidebar.
    </div>
  </div>
</body>

关于html - 内容和侧边栏需要扩展背景，同时保持网格对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35372453/

文章推荐： javascript - jQuery 加法和减法无法正常工作

文章推荐： javascript - 外部 javascript 文件问题

文章推荐： javascript - jQuery:来自 URL 的变量，带有 ÆØÅ 等等

文章推荐： javascript - jquery奇怪地解析自定义标签

c - gstreamer 需要 g_main_loop_run 而 gtk 需要 gtk_main()
我正在尝试用 C 语言编写一个使用 gstreamer 的 GTK+ 应用程序。 GTK+ 需要 gtk_main() 来执行。 gstreamer 需要 g_main_loop_run() 来执行。
python - 为什么 opencv3 需要 libavcodec56 而 opencv2 需要 libavcodec57
我已经使用 apt-get 安装了 opencv。我得到了以下版本的opencv2，它工作正常: rover@rover_pi:/usr/lib/arm-linux-gnueabihf $ pytho
ios - UIScrollView - 需要 x 位置/宽度的约束，需要 y 位置/高度的约束
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
Linux glib 需要 pkg-config 而 pkg-config 需要 glib？
我尝试安装 udev。 udev 在 ./configure 期间给我一个错误 --exists: command not found configure: error: pkg-config and
sql - 为什么我选择 1 需要 40 毫秒，而选择 150 需要 500 秒？
我正在使用 SQLite 3。我有一个表，forums，有 150 行，还有一个表，posts，有大约 440 万行。每个帖子都属于一个论坛。我想从每个论坛中选择最新帖子的时间戳。如果我使用 SEL
Golang jsonapi 需要 string 或 int 但 mongo 需要 bson.ObjectId
使用 go 和以下包: github.com/julienschmidt/httprouter github.com/shwoodard/jsonapi gopkg.in/mgo.v2/bson
sql-server - 同样的 SQL 请求，CockroachDB 需要 4min SQL Server 需要 35ms。我错过了什么吗？
The database仅包含 2 个表: 钱包(100 万行) 事务(1500 万行) CockroachDB 19.2.6 在 3 台 Ubuntu 机器上运行每个 2vCPU 每个 8GB R
c++ - std::iter_swap 需要 ValueSwappable args vs std::swap 需要 Move Assignable args
我很难理解为什么在下面的代码中直接调用 std::swap() 会导致编译错误，而使用 std::iter_swap 编译却没有任何错误. 来自 iter_swap() versus swap() -
oracle - SELECT 需要 100 毫秒； CREATE table as select - 或 - INSERT into select 需要 15 分钟
我有一个非常简单的 SELECT *用 WHERE NOT EXISTS 查询条款。 SELECT * FROM "BMAN_TP3"."TT_SPLDR_55E63A28_59358" SELECT
css - Sass 循环 @import，a.scss 需要 b.scss 上的类，b.scss 需要 a.scss 上的类
我试图按部分组织我的 .css 文件，我需要从任何文件访问文件组中的任何类。在 Less 中，我可以毫无问题地创建一个包含所有文件导入的主文件，并且每个文件都导入主文件，但在 Sass 中，我收到一个
redis - Microsoft.AspNet.SignalR.Redis 需要 StackExchange.Redis.StrongName，但是 StackExchange.Redis.Extensions.Core 需要 StackExchange.Redis
Microsoft.AspNet.SignalR.Redis 和 StackExchange.Redis.Extensions.Core 在同一个项目中使用。前者需要StackExchange.Red
ruby-on-rails - sass-rails 需要 sprockets 2.0.0 但 rails 4.1.0 需要 sprockets 2.12.1
这个问题在这里已经有了答案: Updating from Rails 4.0 to 4.1 gives sass-rails railties version conflicts (4 个答案) 关
需要 Azure 发布管道身份验证
我们有一些使用 Azure DevOps 发布管道部署到的现场服务器。我们已经使用这些发布管道几个月了，没有出现任何问题。今天，我们在下载该项目的工件时开始出现身份验证错误。部署组中的节点显示在线，
需要 Firebase 索引但未提供链接
Tip: instead of creating indexes here, run queries in your code – if you're missing any indexes, you
需要 Elm 语法帮助
你能解释一下 Elm 下一个声明中的意思吗？ (=>) = (,) 我在 Elm architecture tutorial 的例子中找到了它最佳答案这是中缀符号。实际上，这定义了一个函数 (=>
需要 .NET 程序集查看器
我需要一个 .NET 程序集查看器，它可以显示低级详细信息，例如元数据表内容等。最佳答案 ildasm 是 IL 反汇编程序，具有低级托管元数据 token 信息。安装 Visual Studio
需要 VBA 循环逻辑
我有两个列表要在 Excel 中进行比较。这是一个很长的列表，我需要一个 excel 函数或 vba 代码来执行此操作。我已经没有想法了，因此转向你: **Old List** A
.net - 需要.NET库以将TIFF文件转换为PDF
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
需要 XML 命名空间吗？
我正在学习 xml 和 xml 处理。我无法很好地理解命名空间的存在。我了解到命名空间帮助我们在 xml 中分离相同命名的元素。我们不能通过具有相同名称的属性来区分元素吗？为什么命名空间很重要或需要
需要 Azure 端口吗？
我搜索了 Azure 文档、各种社区论坛和 google，但没有找到关于需要在公司防火墙上打开哪些端口以允许 Azure 所有组件(blob、sql、compute、bus、publish)的简洁声明

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 内容和侧边栏需要扩展背景，同时保持网格对齐