Итак, я делаю персональный сайт, и мне трудно создать липкий нижний колонтитул.Я хочу, чтобы нижний колонтитул оставался внизу страницы. Вот пример. Кстати, я все еще плохо знаком с дизайном и разработкой веб-страниц, поэтому мои практики, вероятно, не самые лучшие!
html * {
font-size: 14pt !important;
font-family: 'Work Sans', sans-serif;
}
* {
margin: 0;
}
body {
height: 100%;
}
:root {
--theme: #6600da;
}
.row {
width: 100%;
height: 65%;
display: flex;
justify-content: center;
align-items: baseline;
/* border: 3px solid red; */
}
.navbar-image {
border-radius: 50%;
}
.column {
float: left;
border: 1px black solid;
padding: 5px;
margin: 5px;
/* position: relative; */
}
.left,
.right,
.middle {
display: inline-block;
margin: 2px;
top: 0;
text-align: center;
}
.left {
width: 25%;
font-size: 14pt !important;
}
.left img {
border-radius: 50%;
height: 15%;
width: 15%;
margin-left: 10px;
}
.header img {
padding-top: 5px;
float: left;
}
.header h3 {
text-decoration: underline;
}
.header h4 {
color: var(--theme);
font-weight: 100;
margin: 0px;
}
.header h3,
h4 {
margin: 0;
float: left;
padding-left: 15px;
}
.middle {
width: 45%;
}
.right {
width: 25%;
text-align: justify;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background: #222;
color: white;
text-align: center;
height: 60px;
clear: both;
}
.center {
padding-top: 15px;
}
.proj {
border: 1px black solid;
padding: 30px;
margin: 10px;
margin-top: 0;
}
.proj img {
width: 60px;
height: 60px;
border: 2px black solid;
display: inline-block;
}
.proj h3 {
text-decoration: underline;
margin: 0;
display: inline-block;
}
.proj p {
margin-top: 3px;
}
#footer-text {
color: #7d7d7d;
font-size: 10pt !important;
text-decoration: underline;
}
#footer-link {
color: #7d7d7d;
font-size: 10pt !important;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steve Tautonico</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include Google F -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<img class="navbar-brand navbar-image" src="pictures/stock.jpg" />
<a class="navbar-brand" href="#">Steve Tautonico</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">T.A.R.B.S. Engine</a></li>
<li><a href="#">Termutils</a></li>
<li><a href="#">SBS</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</nav>
<br /><br /><br />
<div class="row">
<div class="column left">
<div class="header">
<img src="pictures\stock.jpg" />
<br />
<h3>Steve Tautonico</h3>
<br />
<h4>CST Student, Developer, IT Technician</h4>
<br /><br />
<p>
Lorem ipsum dolor sit amet, consequat mauris condimentum amet, volutpat est diam purus, nunc sapien a felis magnam vel, tellus praesent urna accumsan, rutrum risus mollis. Urna iaculis sem sagittis volutpat massa facilisis, erat eget feugiat orci odio,
a consectetuer, pharetra sed. Mollis vel placerat maecenas. Est nascetur wisi purus quisque at ante, nec parturient at cras vel sed. Sodales vehicula amet, hymenaeos neque suspendisse.
</p>
</div>
</div>
<div class="column middle">
Lorem ipsum dolor sit amet, semper non dictum lobortis at pellentesque, rutrum et urna. Elit mauris vestibulum ad, hendrerit facilisis, donec libero, turpis id, curabitur arcu amet a dolor vulputate egestas. Wisi arcu mauris amet sit nullam auctor, tempus
nisl duis. Pede consequat phasellus fermentum laboriosam facilisi vehicula. Dolor donec, ut vulputate a suspendisse, ipsum ut sollicitudin justo aliquam venenatis, odio nam nulla ligula varius, tempor tellus et ante placerat. Mauris pede torquent,
tristique ut tempus, viverra laoreet. Purus litora ac sodales venenatis vitae, ante curabitur porttitor. Leo quis risus, est duis, metus tellus pretium libero a, adipiscing vestibulum, earum donec mattis. Libero lacus morbi vitae nec faucibus orci.
Sit erat, proin lorem duis. Sit libero semper turpis leo. Fames nostra luctus urna amet vitae sagittis, mauris velit leo nonummy ut, etiam vehicula nam nam morbi mauris. Justo convallis diam donec, sit nunc vitae integer, neque ipsum ut in, sed
cursus sollicitudin ante a. Nec dapibus penatibus sagittis lorem, sem ut, rutrum dignissim, ipsum justo. Tellus semper mi eget dapibus curabitur, eget duis. Ullamcorper feugiat, quae in eget, sem vitae sit nulla aliquam curabitur ante, diam mattis
ornare quis sed non wisi. In donec amet. Vestibulum leo a. Magnis tincidunt justo pharetra a aenean. Erat ipsum, leo nibh aliquam pede, mi pulvinar odio tortor molestie vero etiam, adipiscing donec class arcu, sem placerat et omnis. Vel felis donec,
maecenas tellus blandit convallis pharetra erat ac, rutrum eleifend tempor ultricies. Suspendisse nulla nisl commodo suscipit massa volutpat. Orci dolor urna neque, tempus penatibus proin sapien dictum ut placerat, est per sit turpis a. Duis gravida
in massa id, nascetur leo augue. Ante amet diam, condimentum aenean semper velit sed risus interdum, sem luctus imperdiet vestibulum fringilla. Quas suspendisse augue est metus malesuada magnis, suscipit a interdum, rutrum ipsum. Vitae consectetuer
ac ut lacinia pellentesque laoreet. Fames in libero porttitor, suspendisse luctus imperdiet ligula fermentum tincidunt, malesuada dolor vestibulum eget pretium, amet parturient cursus sed vel, eget neque dui purus per duis. Mattis enim dapibus,
fringilla justo lectus sapien mi primis, tincidunt fusce parturient sed et pellentesque, dapibus morbi condimentum, nec gravida feugiat ornare et fames ligula.
</div>
<div class="column right">
<br />
<div class="proj proj1">
<img src="pictures\stock.jpg" />
<h3>Project 1 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, integer orci odio ut. In faucibus vestibulum eget mollis dui, justo gravida. Maecenas et neque montes, ut wisi est odio placerat cursus.</p>
</div>
<br />
<div class="proj proj2">
<img src="pictures\stock.jpg" />
<h3>Project 2 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, viverra molestie justo urna eu lectus, justo vitae quam eu vitae lacinia, massa elementum nec platea eget quisque amet. Nunc ac elit. Ultricies suscipit phasellus turpis, a cursus donec nulla dignissim mi, ac vitae
gravida, neque odio sapien, eget velit sed ac pellentesque.</p>
</div>
<br />
<div class="proj proj3">
<img src="pictures\stock.jpg" />
<h3>Project 3 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, id turpis dui arcu urna bibendum, sit vitae pellentesque non sodales quam eros, laudantium est tempor nullam, sit suscipit nec erat ornare vivamus libero. Libero fermentum donec dolor nisl non, felis diam mus sed ac,
aliquet vitae risus facilisis purus cursus leo. Sed aliquam molestie odio vivamus, sit lorem id a sed ligula cras, volutpat volutpat dolor non velit, at ullamcorper euismod aliquet.</p>
</div>
<br />
<div class="proj proj4">
<img src="pictures\stock.jpg" />
<h3>Project 4 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, quam tortor. Amet proin, ac risus nunc sodales urna ac bibendum. Id justo adipiscing morbi non potenti, massa ullamcorper mus urna commodo ultrices gravida, neque dui orci potenti maecenas.
</p>
</div>
<br />
</div>
<!-- Footer -->
<br /><br />
<div class="footer">
<div class="ml-auto center">
<span id="footer-text">Steve Tautonico</span>
<span>•</span>
<a href="#" id="footer-link">Projects</a>
<span>•</span>
<a href="#" id="footer-link">Contact Me</a>
</div>
</div>
</body>
</html>
Если вы запустите этот код, вы увидите, что нижний колонтитул прилипает к правой стороне страницы.Я попытался использовать некоторые примеры из Интернета, но нижний колонтитул обычно зависает где-то в середине страницы.Проблема, кажется, началась, когда я добавил третий столбец.Как только я начал добавлять контент и информацию в третий столбец (крайний справа), нижний колонтитул сломался.Что я тут не так делаю?