我完全是网页设计的新手，我正在自我教学的过程中，因为我承诺尝试为某人建立一个新网站。
我已经按照教程创建了一个响应式设计，在我添加了一个图像滑块插件（Cycle2）之前，一切似乎都进展顺利。
这很好用，但我似乎无法用它来定位，所以下面的div（只是一些社交媒体按钮）位于它下面而不是它后面。
我已经尝试了两天以上，似乎无法深入了解它。我只想让div位于图像滑块下方，并在用户向下滚动时可见。我已设法将其修复到页面底部，但这并不是我想要的，因为它在页面调整大小时会留下空白区域并在全屏幕上消失。
我非常感谢任何建议。这是我的HTML：
<!doctype html>
<html>
<head>
<meta charset="UTF8">
<title>Lamorran House Gardens</title>
<link rel="stylesheet" href="Styles.css">
<!--Include JQUery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<!--Include Cycle2-->
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<!--centre slideshow-->
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<!--twitter-->
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<header>
<div class="row">
<div class="col">
<img class="style-logo" src="images/Logo.png" alt="Lamorran Logo">
<nav class="style-nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">History</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Visitor info</a></li>
</ul>
<ul>
<li><a href="#">Wedding Hire</a></li>
<li><a href="#">Lamorran Lodge</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="row">
<div class="column">
<div class="cycle-slideshow" data-cycle-center-horz=true
data-cycle-center-vert=true data-cycle-speed=2000
data-cycle-overlay-template="{{title}}">
<div class="cycle-overlay"></div>
<img src="images/image1_with_text.jpg" alt="Garden image" data-cycle-title="A garden window onto the sea">
<img src="images/image5_with_text.jpg" alt="Garden image" data-cycle-title="A garden window onto the sea">
<img src="images/image_3_with_text.jpg" alt="Garden image" data-cycle-title="A garden window onto the sea">
<img src="images/image2_with_text.jpg" alt="Garden image" data-cycle-title="A garden window onto the sea">
<img src="images/image_4_with_text.jpg" alt="Garden image" data-cycle-title="A garden window onto the sea">
<img src="images/image6_with_text.jpg" alt="Garden image" data-cycle-title="A garden window onto the sea">
</div>
</div>
</div>
</main>
<div class="logo-box">
<a href="http://www.greatgardensofcornwall.co.uk" class="greatgardens"><img src="images/great-gardens-logo.png" alt="Visit the Great Gardens of Cornwall Website" width="80" height="80"></a>
<a href="https://www.tripadvisor.co.uk/Attraction_Review-g186244-d188844-Reviews-Lamorran_House_Garden-St_Mawes_Roseland_Peninsula_Cornwall_England.html" class="tripadvisor"><img src="images/black-tripadvisor-icon-28.png" alt="Visit our page on Trip Advisor" width="50" height="50"></a>
<a href="https://twitter.com/lamorrangarden" class="twitter-follow-button" data-show-screen-name="false" data-show-count="false">Follow @lamorrangarden</a>
</div>
</body>
</html>
CSS：
@charset "UTF8";
/* CSS Document */
html {
min-height: 100%;
position: relative;
}
html, body {
margin: 0;
padding: 0;
}
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
header{ padding: 32px;
background-color: #119F96;
}
.row:before, .row:after{
content: "";
display: table;
clear: both;
}
.col {
width: 100%;
text-align: center;
}
.style-logo {
margin-left: auto;
margin-right: auto;
display: block;
width: 100;
}
.style-nav ul {
list-style-type: none;
}
.style-nav ul li a {
text-decoration: none;
color:#FFFFCC;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px;
}
.cycle-slideshow { width: 100%; }
.cycle-slideshow img { width: 100% }
/* overlay */
.cycle-overlay {
font-family:"old-standard";
text-align: center;
font-size: 20px;
color:#FFFFCC;
opacity: none;
padding: none;
font-style: italic;
font-weight: lighter;
position: absolute; top: 0; width: 100%; z-index: 600;
background:#119F96; color:#FFFFCC; padding: 15px; opacity: 0.7;
border-bottom: none;
}
.logo-box {
text-align: center;
background-color: #FFFFCC;
width: 100%;
}
.logo-box img
{
text-align: center;
margin: 30px;
vertical-align: middle;
}
.twitter-follow-button{
text-align: center;
margin: 20px;
vertical-align: middle;
}
/*Tablet view*/
@media (min-width: 768px){
.style-nav ul li {
display: inline-block;
}
.style-nav ul {
text-align: center;
}
.cycle-overlay {
text-align: center;
}
}
/*Desktop view*/
@media (min-width: 1024px){
.style-logo{
float: left;
}
.style-nav{
float: right;
}
.cycle-overlay {
text-indent: 20px;
text-align: left;
}
.logo-box {
text-align: right;
background-color: #FFFFCC;
width: 100%;
}
}