body {
display: flex;
height: 100%;
flex-direction: column;
}
header {
padding: 0.25em;
}
footer {
padding-bottom: 1.5em !important;
}
main.content {
background-color: #f2f2f2;
flex: 1 0 auto;
width: 100%;
}
/* Header */
header.ui.secondary.menu {
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
margin-bottom: 0em;
}
header.ui.secondary.menu .item,
header.ui.secondary.menu .dropdown.item {
font-weight: bold;
margin: 0;
}
header.ui.secondary.menu .item:hover,
header.ui.secondary.menu .dropdown.item:hover {
background: rgba(0, 0, 0, 0);
color: #21BA45;
}
header.ui.secondary.menu .active.item {
background: rgba(0, 0, 0, 0);
color: #21BA45;
}
header.ui.secondary.menu .item {
padding-right: 0;
padding-left: 1.42857142em;
}
header.ui.secondary.menu .item:first-child {
padding-left: 0;
}
header.ui.secondary.menu .item > i.icon,
header.ui.secondary.menu .item > i.dropdown.icon {
margin: 0 0.25em;
}
header.ui.secondary.menu .disabled.item {
padding-right: 1.42857142em;
}
/* Footer */
footer.ui.segment {
padding: 0 1em 1em;
}
footer > .ui.divider {
margin: 0 0 1rem;
color: rgba(34, 36, 38, 0.15);
}
/* Full Grid */
.ui.full.grid {
background-color: #ffffff;
border-left: 1px solid rgba(34, 36, 38, 0.15);
border-right: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.container{
height:100%;
border-radius:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/>
<!-- Header -->
<header class="ui secondary menu">
<div class="ui container">
<a class="item" href="#">JSFiddle</a>
<div class="right menu">
<a class="item" href="#">
<div class="ui green button">Sign up</div>
</a>
<a class="item" href="#">Log in</a>
</div>
</div>
</header>
<!-- Page Content -->
<main class="content">
<div class="ui container segment">
<div class="ui relaxed divided padded full grid">
<div class="row">
<div class="column">
<h1 class="ui header">
<div class="content">
Contact
</div>
</h1>
</div>
</div>
<div class="ui divider"></div>
<div class="row">
<div class="eleven wide column">
<form class="ui form" novalidate>
<div class="field">
<div class="two fields">
<div class="field">
<label>Name</label>
<input type="text" name="name" />
</div>
<div class="field">
<label>Email address <span class="disabled-text">(Required)</span></label>
<input type="text" name="email" />
</div>
</div>
</div>
<div class="field">
<label>Subject</label>
<input type="text" name="subject" />
</div>
<div class="field">
<label>Message <span class="disabled-text">(Required)</span></label>
<textarea rows="5" name="text"></textarea>
</div>
<button type="submit" class="ui green button">Send request</button>
</form>
</div>
<div class="five wide column">
<h5 class="ui dividing header">
<i class="bug icon"></i>
<div class="content">
Report a bug
</div>
</h5>
<div class="ui list">
<div class="item">
<i class="info icon"></i>
<div class="content">
Provide as much information as possible.
</div>
</div>
<div class="item">
<i class="info icon"></i>
<div class="content">
Explain exactly what has happened and what steps should we take to reproduce the problem.
</div>
</div>
</div>
<h5 class="ui dividing header">
<i class="comments outline icon"></i>
<div class="content">
Contacts
</div>
</h5>
<div class="ui relaxed list">
<div class="item">
<div class="content">
<div class="header">John Doe</div>
<div class="description">
[email protected]
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">Jane Doe</div>
<div class="description">
[email protected]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer ui vertical segment">
<div class="ui divider"></div>
<div class="ui container">
<div class="ui right floated horizontal list">
<a class="item" href="#">Features</a>
<a class="item" href="#">Contact</a>
</div>
<div class="ui horizontal list">
<div class="disabled item">Copyright © 2016 JSFiddle.</div>
</div>
</div>
</footer>