我正在尝试添加一个JavaScript组件,该组件应该添加并可以在各种站点上使用。我的代码使用带有position:fixed的div在站点底部添加了一个矩形。 在某些站点上,屏幕底部已经有一些元素,它们也使用position:fixed。 我想找出那些要素并加以提出。这样两个元素都将可见。 另一个选择是将整个站点抬高,并将我的div放在底部。
有人知道吗,如何在JavaScript / css配置中实现?
我创建了一个示例代码,该代码类似于在网站底部添加横幅的操作:http://jsfiddle.net/bp0yk7cv/8
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);
给出了代码站点。 JavaScript部分已添加,可以处理站点代码。我的要求是使新横幅后面的所有元素都浮出水面。
谢谢
答案 0 :(得分:2)
将 flexbox 用于您的底部页脚布局。将display: flex;
和flex-direction: column;
添加到页脚的父级;将margin-top: auto;
添加到页脚。完成!
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;
}
p {
line-height: 1.5;
}
.text-center {
text-align: center;
}
.bg-black {
background: #212121;
}
.bg-black a {
color: #efefef;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu.horizontal-menu li {
display: inline-block;
font-size: 0;
}
ul.menu.horizontal-menu li a {
font-size: 12px;
}
ul.menu.vertical-menu li {
display: block;
}
ul.menu.vertical-menu li a {
display: block;
padding: 5px 10px;
}
.header {
display: flex;
}
.header .branding {
margin-right: 0;
height: 52px;
line-height: 52px;
}
.header nav {
margin-left: auto;
}
.header nav ul li a {
height: 52px;
display: table-cell;
vertical-align: middle;
}
.content-sideber {
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.content-sideber .content {
width: 75%;
}
.content-sideber .sidebar {
width: 25%;
}
@media (max-width: 575px) {
.content-sideber {
flex-direction: column;
}
.content-sideber .content,
.content-sideber .sidebar {
width: 100%;
}
}
.footer {
margin-top: auto;
padding: 0 10px;
}
<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
<li><a href="#">Atque excepturi corporis</a></li>
<li><a href="#">Officiis magnam</a></li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>