个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在处理我的 HTML/CSS 页面的布局。我希望有一个侧边栏 + 主要内容，上面有一个导航栏。
在这张图片上，布局似乎“不错”，但我想将所有内容拉伸(stretch)到整个页面的大小。不要因为我的主要内容过度扩展(~56px)而被这个导航栏惹恼
我写了下面的代码...
html,
body {
margin: 0 auto;
height: 100%;
}
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper>* {
flex: 1 100%;
}
.main {}
.sidebar {}
@media all and (min-width: 600px) {
.sidebar {
flex: 1 0 0;
}
}
@media all and (min-width: 800px) {
.main {
flex: 3 0px;
}
.sidebar {
order: 1;
}
.main {
order: 2;
}
}<body>
<div class="wrapper">
<header class="header">
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
</header>
<article class="main">
<app-root></app-root>
</article>
<aside class="sidebar">Aside 1</aside>
</div>
</body>最佳答案
从我对这个问题的评论来看，问题是因为您为此布局使用了包装 flexbox；您应该将 aside 和 article 包装到另一个 flexbox 中以使其工作。查看下面的演示(省略了移动 View 的媒体查询):
* {
box-sizing: border-box;
}
html,
body {
margin: 0 auto;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column; /* column flexbox */
border: 1px solid red;
height: 100%;
}
section,
aside,
header {
border: 1px solid;
}
.wrapper section {
display: flex; /* wraps article and aside into a flexbox */
flex: 1; /* fill remaining space */
}
article {
flex: 1; /* fill remaining space */
}<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="wrapper">
<header class="header">
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
</header>
<section>
<aside class="sidebar">Aside 1</aside>
<article class="main">
Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum
some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
</article>
</section>
</div>关于html - 如果不过度扩展我的内容，Flex 列不会拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56098159/
25
4
0
我是 magento 的新手，目前我在 magento 安装期间遇到“必须加载 PHP 扩展 curl ”错误。你能帮帮我吗？ 最佳答案 如果您的服务器上没有安装 curl，您可以键入以下命令之一来安
我在 macOS Mojave/macOS Big Sur/macOS Monterey/macOS Ventura 上使用最新的 php 版本 7.2 并收到类似错误 $composer requ
这个问题已经有答案了: Why generic type is not applicable for argument extends super class for both? (5 个回答) 已关
我正在使用 NightWatch.js 并进行一些 UI 测试，我想用一些额外的 desiredCapabilities 启动默认浏览器实例(即启用扩展并应用一些特定值)。 p> 注意:我可以执行这些
有人知道为什么我在 java 8 中使用此代码时没有服务器扩展名称吗: try { URL url = new URL(urlString); URLC
扩展提供给我的类(class)。为现有的类提供新功能。或扩展现有的mixin s 或虚拟类，任何东西都可以工作。 也许是这样的: class FlatButton {} // maybe no
我有一个关于使用 c 代码和 mod_wsgi 扩展 python 的问题。 我在 apache 服务器中有一个 django 应用程序，它查询 postgresql 数据库以生成报告。在某些报告中，
testcafe支持在Chrome浏览器中加载crx扩展吗？ 如果是这样，请告诉我需要尝试什么方法。 我尝试了下面的代码，但没有成功 await t.eval(new Function(fs.read
这个问题已经有答案了: What is a raw type and why shouldn't we use it? (16 个回答) 已关闭 3 年前。 有什么区别: // 1 class A c
我正在编写一个 chrome 扩展来记录单击开始按钮后触发的请求。 这是我的文件:1. list .json { "manifest_version": 2, "name": "recorde
我每天都在使用 vim 和 perforce 现在我的问题是，如果我想查看 perforce 文件修订版，则从命令模式下的 vim :!p4 打印文件#1 vim 试图让我获得缓冲区 #1。有没有办法
大家好，我有一个关于 NUnit 扩展(2.5.10)的问题。 我想做的是向 数据库。为此，我使用 Event 创建了 NUnit 扩展 听众。 我遇到的问题是公共(public)无效 TestFin
我有弹出窗口，而不是模态窗口。 如何通过单击页面的其他部分(不在窗口中)来关闭此窗口？ 最佳答案 像这样的东西: function closeWin(e, t) { var el = win.
我通常非常谨慎地使用扩展方法。当我确实觉得有必要编写一个扩展方法时，有时我想重载该方法。我的问题是，您对调用其他扩展方法的扩展方法有何看法？不好的做法？感觉不对，但我无法真正定义原因。 例如，第二个
扩展 Ant Ant带有一组预定义的任务，但是你可以创建自己的任务，如下面的例子所示。 定制Ant 任务应扩展 org.apache.tools.ant.Task 类，同时也应该拓展 execut
我想要一个重定向所有请求的扩展: http://website.com/foo.js 到: http://localhost/myfoo.js 我无法使用主机文件将主机从 website.com 编辑
对于为什么 QChartView 放在 QTabWidget 中时会扩展，我有点迷惑。 这是 QChartView 未展开(因为它被隐藏)时应用程序的图片。 应用程序的黑色部分是 QOpenGLWid
如果在连接条件中使用 OR 运算符，如何优化以下查询以避免 SQL 调优方面的 OR 扩展？ SELECT t1.A, t2.B, t1.C, t1.D, t2.E FROM t1 LEFT J
一旦加载插件的问题得到解决(在 .NET 中通过 MEF 的情况下)，下一步要解决的是与它们的通信。简单的方法是实现一个接口(interface)，使用插件实现，但有时插件只需要扩展应用程序的工作方式
在我的 Symfony2 包中，我需要检查是否定义了一个函数(一个扩展)。更具体地说，如果安装了 KnpMenuBundle，我会在我的包中使用那个，否则我将自己渲染插件。 我试过了，但这当然不起作用
我是一名优秀的程序员,十分优秀！