如何不将页眉和页脚传递到每个页面
费科
我的网站将具有侧边栏，页眉，页脚和内容。像这样：
这是我可以实现的简单网格。
但是在某些页面上，我希望我的内容右侧有一个附加侧栏。问题是我希望它移动页眉和页脚：
我发现的唯一解决方案是将页眉和页脚传递到每个页面中。但这不是DRY。
那么，我该怎么做呢？这有可能吗？如果是这样，怎么办？我什至无法想象最终代码应该是什么样子...
PS：我阅读了有关辅助插座的信息，但不知道如何将其应用于此问题。
喝
在我更好地理解了您的问题之后，这里有另一个答案:)
Look at this codepen: https://codepen.io/spierala/pen/wvBWaWV
For the CSS I also used bootstrap flex classes, but the main magic is position: absolute on the div.content-sidebar so it can "escape" of its parent container). Also the parent container div.content-container is not allowed to have positioning itself to make that work.
The app-component must decide over giving footer and header a margin.
The routed component inside the router outlet must decide over the margin of the div.content. Because div.content-sidebar is absolute positioned it can not influence the width of div.content anymore. We have to fix that manually by adding margin if the content-sidebar is visible.
So you can use Angular to add the css classes / styling which are needed for adding or removing the margins in app-component and in the routed components - depending on the content-sidebar visibility.
How will app-component and routed component know? You could introduce a Angular service which will hold the information if a sidebar is visible or not. The routed component could set that information. app-component reads it.
EDIT: regarding the "escape"... if header and footer have fixed heights then you could use negative margins on the content-sidebar instead of the position:absolute approach
If footer and header have a height of 50px then the div.content-sidebar margins look like this:
.content-sidebar {
margin-top: -50px; // - header height
margin-bottom: -50px; // - min footer height
}
我在这里创建了另一个codepen：https ://codepen.io/spierala/pen/PowzmzL您还将看到，div.content由于content-sidebar并未定位，因此不再需要边距absolute。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在xsl-fo中为每个页面添加页眉和页脚以生成pdf
- 2
如何使页眉和页脚文件包含在多个页面中
- 3
如何使页眉和页脚文件包含在多个页面中
- 4
如何隐藏特定页面的redmine页眉和页脚？
- 5
页眉和页脚未显示在页面上
- 6
网站优化和页眉/页脚页面
- 7
为每个页面添加固定的页眉/页脚jsPDF
- 8
如何在不将margin设置为0的情况下从window.print（）中删除页眉和页脚？
- 9
如何使用Angularjs包含页眉和页脚？
- 10
OpenOffice API：如何关闭页眉和页脚
- 11
如何分隔页眉正文和页脚
- 12
如何从PDF删除页眉和页脚？
- 13
如何使用phantom-html2pdf在PDF页面中添加页眉和页脚
- 14
如何将HTML页眉和页脚添加到页面？
- 15
如何使用多个页面的固定页眉和页脚分隔正文内容
- 16
如何在HTML2PDF中指定动态页面页脚和页眉
- 17
如何在 Jasperreports 中以特定方式将页眉、页脚和表格正文拆分为页面
- 18
如何在插件内部的分类页面中包含主题页眉和页脚
- 19
将页脚固定到页面底部（无页眉）
- 20
如何在CodeIgniter中加载页眉，页眉，页脚，页脚等页面视图？
- 21
如何在CodeIgniter中加载页眉，页眉，页脚，页脚等页面视图？
- 22
为我的角度页面创建复杂的页眉和页脚
- 23
MigraDoc页眉和页脚
- 24
如何在不使用任何templateresolver的情况下如何使用thymeleaf命名空间包含页面的页眉和页脚？
- 25
如何仅加载内容区域，如何通过单击链接在新页面中再次跳过页眉和页脚的加载
- 26
如何创建tableview部分之间的间距？（每个部分的页眉和页脚已经是自定义视图）
- 27
如何使内容div从页眉div扩展到页脚div？
- 28
如何在打印时在IE中以编程方式删除页眉和页脚，而不是使用IE页面设置？
- 29
除非另一个站点页面的页眉和页脚，否则如何获取整个正文
我来说两句