i`m using layout page called home.blade.php .here is the code.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Training Management</title>
<meta name="description" content="Free Bootstrap Theme by BootstrapMade.com">
<meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,300|Raleway:300,400,900,700italic,700,300,600">
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
{!! Charts::assets() !!}
</head>
<body>
<div class="loader"></div>
<div id="myDiv">
<!--HEADER-->
<div class="header">
<div class="bg-color">
<header id="main-header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home#">MOB<span class="logo-dec">ITEL</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="">Trainee Details</li>
<li class="">User Registration</li>
<li class="">Downloads</li>
<li class="">Certificate & Evaluation</li>
<li class="">Training Programs</li>
<li class="">Contact Us</li>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</nav>
</header>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="banner-info text-center wow fadeIn delay-05s">
</div>
</div>
</div>
</div>
#yield('content')
</div>
<footer id="footer" >
<div class="container">
<div class="row text-center">
<p>© All Rights Reserved.</p>
<div class="credits">
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/custom.js"></script>
<script src="contactform/contactform.js"></script>
</body>
</html>
This layout need to use in a web page and it has extend by me but not working.here is the code.
`#extends('layouts.home')
#section('content')
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<tbody>
<tr>
<td>Training ID</td>
<td>{{ $item['trainee_id'] }}</td>
</tr>
<tr>
<td>Name With Initials</td>
<td>{{ $item['trainee_name'] }}</td>
</tr>
<tr>
<td>Download Details</td>
<td><a class="btn btn-success" href="BankExport/{{ $item->trainee_id }}">See Here</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
#endsection`
This the screenshot what um getting.
This is the type of design um expexting
put all the css and js under the public directory and then
change all the js and css call like this
<link rel="stylesheet" type="text/css" href="{{ public_path('css/jquery.bxslider.css') }}">
It seems that your "extends" link is not correct, based on what the question says. You say that "i'm using layout page called home.blade.php," yet in your code you extend a page called "layouts.home" (#extends('layouts.home'))!
You might need to make sure you are actually calling #extends('home.blade.php').
If this doesn't work, and since there aren't any errors on other pages, can we see the framework for those pages to compare with this one?
Hope this helps!
Related
I'd like to have the flexbox cards view horizontally and vertically on any screen. I've done it like this and successfully figured out how to display the cards horizontally, but when you try viewing it on a mobile device or smaller screen, the cards remain horizontal. I tried using bootstrap card-deck that didn't help. When i used col d-flex justify-content-center, this allowed the cards to resize but they still don't stack vertically. In other instances i have just used card-deck like here and and its worked fine. Please any suggestions.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon"type="image/ico" href="/images/favicon/favicon.ico"/>
<meta name="viewport" content="width=device-width initial-scale=1" />
<environment include="Development">
<link href="~/lib/bootstrap//css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" >
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<a class="navbar-brand" asp-action="index" asp-controller="home">
<img src="~/images/employees.png" height="30" width="30" />
</a>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://digitalconsulting.cc/" target="_blank" >Digital Consulting.cc</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item">
<a asp-action="index" asp-controller="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-controller="home" class="nav-link">Create</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tools <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Software</li>
<li>Security</li>
<li>Mobile</li>
</ul>
</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<div>
#RenderBody()
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Scripts", required: true)
}
</div>
</body>
</html>
Index.cshtml
#model IEnumerable<Employee>
#{
ViewBag.Title = "Employee List";
}
<!-- div class="col d-flex justify-content-center"> -->
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
<div class="card-header">
<h3>#employee.Name</h3>
</div>
<img class="card-img-top" src="~/images/noimage.jpg"
asp-append-version="true" />
<div class="card-footer text-center">
<a asp-controller="home" asp-action="details" asp-route-id="#employee.Id"
class="btn btn-primary m-1">View</a>
Edit
Delete
</div>
</div>
}
</div>
Found this code on W3 Schools.
Swap out:
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
With this code:
<div class="row row-cols-1 row-cols-md-3 g-4">
#foreach (var employee in Model)
{
<div class="card h-100">
I am using Django and I have bootstrap4 loaded with min.css/js files included in my stylesheet references that are properly linked and yet my mobile toggle menu refuses to toggle when clicked.
My browser source shows that it has loaded these files without any errors so I am assuming I am missing a file that is required to use bootstrap toggle menus in Django.
{% load static %}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Flash Stacks</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.js' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--NAVIGATION-->
<header class="main-head">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">EXAMPLE APP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--COLLAPSIBLE CONTENT-->
<div class="collapse navbar-collapse" id="main-nav">
<!--LINKS-->
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href='#'>About</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#'>Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#'>Products</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page-header container-fluid">
<h1>Flash Card Stacks</h1>
</div>
</header>
<!--BODY CONTENT -->
<div class="content container-fluid">
{% block content%}
{% endblock %}
</div>
<!--FOOTER CONTENT-->
<div class="footer container-fluid">
<p>This is the footer of the webpage!</p>
</div>
</body>
</html>
first you have to check all html tags and other item;
I have been trying this for the past few hours and it for some reason, my title won't move in the center. Is it because I am using yield or something? Also I tried putting it in the head tag using title tag but nothing happen so I have to use a h3 tag, but it won't let me move center.
I have tried many different method but still doesn't work such as:
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
padding-right
margin
Here is my code:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/title.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
On the h3 try using bootstraps built in class of text-center
Example:
<h3 class="text-center">#yield('title')</h3>
https://getbootstrap.com/docs/3.3/css/#type-alignment
I am trying make my navbar color blue but for some reason, there is this 2 parts which are white and when I try to use background: lightblue; I want to make them complete blue but for some reason it doesn't work. (see screenshot) Can anyone help me? Thanks in advance
Below is a screenshot of what happen:
This is where the navbar(app.blade.php) is:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Deleted Records</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
This is the style.css that I used
#navbar-toggle collapsed{
background:#ADD8E6;
}
#navbar-header{
background:#ADD8E6;
}
Instead of style #navbar-header add css in your .navbar
.navbar {
background:#ADD8E6;
}
Change #navbar-header by .navbar, and if it still not working, add !important clause on .navbar class
.navbar {
background-color: blue; !important;
}
I have a html page using a bootstrap theme. I have a slight problem with CSS styling. It is a problem I have never come across. The problem is that the background doesn't fill the page on page load, only when the page is resized dos it fill the page. Any suggestions?
Thanks,
James Hyland
Here is the _Layout.cshtml code;
#{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#side-navbar-footer {
position: fixed;
bottom: 0;
padding: 10px 15px;
display: block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
border-top: 1px solid black;
}
.dropdown-toggle{
color:black;
}
#page-wrapper {
background: radial-gradient(white 10%, grey );
background-size: cover;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HBL Website</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav id="navbar-top" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Hylands Biggest Loser</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-user fa-fw"></i> User Profile
</li>
<li>
<i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li>
<a asp-controller="Account" asp-action="Login"><i class="fa fa-sign-out fa-fw"></i> Login</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</li>
<li>
<i class="fa fa-line-chart"></i> My Progress<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Weights
</li>
<li>
Target Weight
</li>
<li>
My Summary
</li>
<li>
</ul>
</li>
<li>
<i class="fa fa-users"></i> My Group<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Members
</li>
<li>
Summary
</li>
<li>
</ul>
</li>
<li>
<a style="bottom:0" href="tables.html"><i class="fa fa-copyright"></i> Needlecast Ltd. 2017</a>
</li>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
#RenderBody()
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
#RenderSection("Layout", required: false);
#RenderSection("Scripts", required: false)
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
</body>
</html>
And here is the Index.cshtml code (which isnt causing the issue);
#{
ViewData["Title"] = "About";
}
<style>
*{
text-align:center;
}
</style>
<body >
<img src="~/img/asset 1.jpg"/>
<h1>Welcome to Hylands Biggest Loser!</h1>
<h2>Click the buttons on the side. They will allow you to view your weights, progress, and your overall weekly summary.</h2>
<h2>You can also view the other members in your group, as well as a weekly summary for all members.</h2>
</body>
Set all your main wrapper elements to have a height of 100% and your background should always take up at least 100% of the page.
Add this css style:
html, body, #wrapper, #page-wrapper { height: 100%; }