Я использую yaml ниже в Rmarkdown, чтобы создать оглавление, а также верхний и нижний колонтитулы, но нижний колонтитул не отображается как полная ширина страницы. Это полная ширина тела документа. Как заставить нижний колонтитул быть на всю ширину страницы? Нужно ли что-то изменить в файле css?
output:
html_document:
toc: true
toc_float: true
toc_collapsed: true
toc_depth: 3
number_sections: true
theme: lumen
css: stylesheets/common.css
includes:
in_header: header.html
after_body: footer.html
> sessionInfo()
R version 3.6.1 (2019-07-05)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 17763)
Matrix products: default
locale:
[1] LC_COLLATE=English_United States.1252 LC_CTYPE=English_United States.1252
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C
[5] LC_TIME=English_United States.1252
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] flexdashboard_0.5.1.1
loaded via a namespace (and not attached):
[1] compiler_3.6.1 rsconnect_0.8.15 htmltools_0.4.0 tools_3.6.1 yaml_2.2.0
[6] Rcpp_1.0.3 rmarkdown_1.17 knitr_1.26 jsonlite_1.6 xfun_0.11
[11] digest_0.6.22 packrat_0.5.0 rlang_0.4.1 evaluate_0.14
Вот нижний колонтитул. html
<footer class="footer">
<div class="tmp-container">
<!-- .footer-wrap -->
<!-- .footer-doi -->
<div class="footer-doi">
<!-- footer nav links -->
<ul class="menu nav">
<li class="first leaf menu-links menu-level-1"><a href="https://www.doi.gov/privacy">DOI Privacy Policy</a></li>
<li class="leaf menu-links menu-level-1"><a href="https://www.usgs.gov/laws/policies_notices.html">Legal</a></li>
<li class="leaf menu-links menu-level-1"><a href="https://www2.usgs.gov/laws/accessibility.html">Accessibility</a></li>
<li class="leaf menu-links menu-level-1"><a href="https://www.usgs.gov/sitemap.html">Site Map</a></li>
<li class="last leaf menu-links menu-level-1"><a href="https://answers.usgs.gov/">Contact USGS</a></li>
</ul>
<!--/ footer nav links -->
</div>
<!-- /.footer-doi -->
<hr>
<!-- .footer-utl-links -->
<div class="footer-doi">
<ul class="menu nav">
<li class="first leaf menu-links menu-level-1"><a href="https://www.doi.gov/">U.S. Department of the Interior</a></li>
<li class="leaf menu-links menu-level-1"><a href="https://www.doioig.gov/">DOI Inspector General</a></li>
<li class="leaf menu-links menu-level-1"><a href="https://www.whitehouse.gov/">White House</a></li>
<li class="leaf menu-links menu-level-1"><a href="https://www.whitehouse.gov/omb/management/egov/">E-gov</a></li>
<li class="leaf menu-links menu-level-1"><a href="https://www.doi.gov/pmb/eeo/no-fear-act">No Fear Act</a></li>
<li class="last leaf menu-links menu-level-1"><a href="https://www2.usgs.gov/foia">FOIA</a></li>
</ul>
</div>
<!-- /.footer-utl-links -->
<!-- .footer-social-links -->
<div class="footer-social-links">
<ul class="social">
<li class="follow">Follow</li>
<li class="twitter">
<a href="https://twitter.com/usgs" target="_blank">
<i class="fa fa-twitter-square"><span class="only">Twitter</span></i>
</a>
</li>
<li class="facebook">
<a href="https://facebook.com/usgeologicalsurvey" target="_blank">
<i class="fa fa-facebook-square"><span class="only">Facebook</span></i>
</a>
</li>
<li class="github">
<a href="https://github.com/usgs" target="_blank">
<i class="fa fa-github"><span class="only">GitHub</span></i>
</a>
</li>
<li class="flickr">
<a href="https://flickr.com/usgeologicalsurvey" target="_blank">
<i class="fa fa-flickr"><span class="only">Flickr</span></i>
</a>
</li>
<li class="youtube">
<a href="http://youtube.com/usgs" target="_blank">
<i class="fa fa-youtube-play"><span class="only">YouTube</span></i>
</a>
</li>
<li class="instagram">
<a href="https://instagram.com/usgs" target="_blank">
<i class="fa fa-instagram"><span class="only">Instagram</span></i>
</a>
</li>
</ul>
</div>
<!-- /.footer-social-links -->
</div>
<!-- /.footer-wrap -->
</footer>
<!-- END USGS Footer Template- -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TKQR8KP"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Вот нижний колонтитул css
/* footer (only) css */
.menu.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.nav:before, .nav:after {
content: none;
}
footer.footer {
background: #00264c;
padding-bottom: 0px;
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #E5E5E5;
}
footer.footer .footer-doi {
padding-right: 0;
padding-left: 0;
}
footer.footer .footer-doi ul.menu li a {
padding: 5px 0px;
color: #ffffff;
float: left;
font-size: 12px;
}
footer.footer .footer-doi ul.menu li:first-of-type {
padding-left: 0px;
}
footer.footer .footer-doi ul.menu li {
float: left;
padding-right: 2px;
padding-left: 5px;
}
footer.footer .footer-doi ul.menu li:after {
content: "|";
color: #ffffff;
float: left;
padding-top: 5px;
padding-left: 7px;
font-size: 12px;
}
footer.footer .footer-doi ul.menu li:last-child:after {
content: "";
}
footer.footer .footer-wrap .menu.nav a {
padding: 4px 0px;
color: #ffffff;
font-size: 12px;
}
footer.footer .footer-social-links {
color: #ffffff;
font-size: 12px;
padding-right: 0;
}
footer.footer .footer-social-links ul {
float: right;
margin-top: 0px;
}
footer.footer .footer-social-links ul li.follow {
padding-top: 6px;
padding-right: 5px;
}
footer.footer .footer-social-links ul li {
float: left;
height: 24px;
margin: 0 2px;
list-style: none;
list-style-type: none;
}
footer.footer .footer-social-links ul li:last-of-type {
margin-right: 0px;
}
footer.footer .footer-social-links ul li a i {
color:#fff;
font-size: 24px;
}