html - 宽度 100% 超过屏幕的 100%-6ren

html - 宽度 100% 超过屏幕的 100%

转载作者：太空宇宙更新时间：2023-11-04 05:11:30

25

4

我正在为响应式网站创建一个窄样式表。它设置为在浏览器宽度介于 0px 和 400px 之间时生效。 (见下文)

<link href="css/narrow.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 400px)" />

我的目标是让内容始终在浏览器中居中，无论尺寸如何。问题是，包装 div 似乎保持在 400 像素宽，并且即使包装 div 设置为 100% 也不会响应浏览器宽度。

这是 HTML:

<body>

    <div id="wrapper"> <!-- Start Wrapper -->

        <div id="sidebar"> <!-- Start Sidebar -->
        </div> <!-- End Sidebar -->

        <div id="mainContent"> <!-- Start Main Content -->

            <div id="about"> <!-- Start About -->
            </div> <!-- End About -->

            <div id="services">  <!-- Start Services --> 
                 <div id="servicesWrapper"> 
                 </div>
            </div> <!-- End Services -->

            <div id="work"> <!-- Start Work -->
            </div> <!-- End Work -->

            <div id="contact"> <!-- Start Contact -->
            </div> <!-- End Contact -->

        </div> <!-- End Main Content -->


    </div> <!-- End Wrapper -->
    </body>

这是CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#wrapper {
    text-align: center;
    width: 100%;
}

#sidebar {
    background-color: #FFF;
    width: inherit;
    height: 300px;
    top: 0;
    margin-bottom: 10%;
    position: fixed;
    z-index: 2;
}

#mainContent {
    margin-left: auto;
    margin-right: auto;
}

#about {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    min-height: 600px;
    max-height: 100%;
    position: relative;
    margin-top: 350px;
    z-index: 1; 
}

#services {
    width: 65%;
    margin-left: 5%;
    min-height: 600px;
    max-height: 100%;
}

#work {
    width: 65%;
    margin-left: 5%;
    height: 600px;
    max-height: 100%;
}

#contact {
    width: 65%;
    margin-left: 5%;
    height: 600px;
    max-height: 100%;
}

最佳答案

那不是你的问题。您的问题是您正在尝试使用 text-align 使 block 元素居中。如果你想让一个 div 受 text-align 影响，你需要设置 display:inline-block; 。

参见 Vertically aligning block element to image?有关此的更多详细信息(对于垂直情况，但适用相同的想法)

关于html - 宽度 100% 超过屏幕的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9242535/

25

4

0

文章推荐： python - 如何使用 Word2Vec 获取单个单词的单个向量？

文章推荐： c++ - 从 C 中创建一个新的 EXE

文章推荐： c - 计算数字总和的程序

超过 Youtube 视频上传限制
我使用这个 cmd 应用程序 https://github.com/tokland/youtube-upload 上传 50 个视频后，我收到此错误: [RequestError] Server re
超过 Docker 最大深度
尝试将 docker 容器提交到镜像时出现错误: [root@dockerregistry /]# docker commit da4180ab1536 dockerregistry:5000/myi
c - 优先规则==超过=
我只是想知道这样做会更好吗: if((fd = open(filename, O_RDWR)) == -1) { fprintf(stderr, "open [ %s ]\n", strerror(e
elasticsearch - 低磁盘水印 [??%] 超过
我在我的开发机器(单个笔记本)中使用 Elasticsearch 1.4.4。一切都设置为默认值，因为我从未更改过任何设置。当我启动它时，我通常会收到以下消息: [2015-10-27 09:38:
超过 MySQL 锁等待超时
我收到错误 Lock wait timeout exceeded;尝试重新启动事务。这是什么原因，如何解决？仅供引用:MySQL 配置文件中的 innodb_lock_wait_timeout = 1
超过 2 列的松弛 block
我对 Slack 中的 block 功能有疑问。有人设法构建 3 列而不是 2 列吗？我凭直觉尝试了以下代码，但它不起作用: { "blocks": [ {
html - 固定尺寸 DIV 超过
div 中的内容超过由 css 决定的固定大小。 #fixeddiv { position: fixed; margin: auto; max-height: 300px
android - 超过 EditText 限制时提醒用户
我想将 EditText 字段限制为 150 个字符，我可以很容易地做到这一点。但是，当用户试图超过该限制时，我还需要通过键入(即第 151 个字符)或粘贴超过 150 个字符来提醒用户。解决这个问
FFmpeg 超过 1000 帧重复且输入高度不匹配
我目前正在使用此代码并排记录两个窗口: ffmpeg -f gdigrab -framerate 30 -i title="" -f gdigrab -framerate 30 -i title=""
excel - 超过 64 个嵌套限制的复杂替换
我在几个包含长字符串的单元格上使用嵌套的 SUBSTITUE 函数，并定期更新 SUBSTITUE fx，这导致我将其复制并粘贴到所有需要它的单元格中。问题是，我的 SUBSTITUTE 列表会随着时
css - 超过 div 大小的图像
我创建了一个标题 div，如下所示:
adsense - 超过 9 个就看不到谷歌广告
Here is the demo link 您怎么看，页面中只有 8 个广告可见，但我有 14 个广告。我已阅读有关广告限制的信息 here但不明白是不是我的情况？有人可以给我确切的答案，为什么我看不
c - 超过 50 万个元素的快速排序崩溃
我的非常简单的算法 - C 中的快速排序有问题。它非常有效(随机化大约 0.1 秒并检查列表是否已排序)但是当我想要对超过 500k 的元素进行排序时它会崩溃。不幸的是，我需要对它们进行更多排序，因为
c++ - 超过 Hackerrank 的时间限制
我成功解决了一个关于 Hackerrank 的问题，它通过了所有测试用例，但我得到了一个错误，超过了时间限制。我猜如果我优化我的代码它会工作，但我想不出任何方法来使我的代码更有效率。问题是: 对大小
vim - 超过 1 个字符的环绕视觉文本
你会如何用包围下面的文字3 个反引号 ```使用 tpope 的 Vim Surround . 我所能做的就是 1 个反引号使用 S`在视觉模式下: 最佳答案这不是你问的，但这可以在没有环绕的情
elasticsearch - 超过 SwifType 速率限制
我目前有一个模拟账户。我正在尝试为我的雇主使用 SwifType 制作 POC。我们有一个非常大的数据库，每 1 小时索引一次，并创建一个 JSON 文件。我认为与 Elastic 的集成将非常容易，
c# - 超过 SMTP 限制发送电子邮件
我为一个大约有 100 到 120 名成员的小型组织维护网站。每个月，我们都会发送一封电子邮件，通知我们的成员我们将在即将举行的 session 中讨论的主题。我正在尝试使用我们的网站为我们提供一
vba - 超过 255 个字符的数组公式
这个问题已经有答案了: How to automatically input an array formula as string with more than 255 characters in l
java - 超过 FileSizeMax 时取消文件上传
我有一个在 JBoss 6.1 中运行的 JSF 应用程序，它使用内部Tomcat Servlet 容器。我已经通过apache commons文件上传实现了上传。我想防止上传过大的文件并设置了属性
mysql - 超过 PyMYSQL 锁等待超时
当我尝试在 PyMySQL 上执行查询时，出现以下错误: pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; try rest

首页

博学

6Ren·AI

商城

html - 宽度 100% 超过屏幕的 100%