I am new to bootstrap and css, however with some code on internet, I was able to create my welcome.jsp page.
What I wanted to do
I wanted my main content div in between header and footer. Also I wanted the footer to be in fixed position.
What I achieved
I was able to create main div in between header and footer.
problem
when I reduce the zoom of my chrome browser, the main div height gets shrink, leaving unnecessary blank space between main div and footer.
without any zoom
reduced zoom
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
#footer {
position:fixed;
height: 20px;
bottom: 0;
width: 100%;
background-color: green;
}
#main{
margin-top:-10px;
border-radius: 8px;
border: 1px solid #73AD21;
height: 550px;
}
</style>
<script src="../jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/bootstrap.min.js"></script>
<link href="../bootstrap/bootstrap.min.css" rel="stylesheet" >
<script>
$(document).ready(function(){
$("#header").load("header/header.jsp");
});
</script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<div id="header"></div>
</div>
</div>
<div class="row">
<div class="container-fluid" >
<div class="col-xs-12">
<div id="main">CONTENT<br></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
I don't want that extra space between main div and footer. Is there any way that I can do so?
You should be able to achieve this with height:100vh; on #main element.
just change fixed to relative:
<style>
#footer {
position:relative;
height: 20px;
bottom: 0;
width: 100%;
background-color: green;
}
In order to fix that you will need to get the height value from your screen dynamically.
var content = document.getElementsByTagName("content")[0];
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var newValue=x-300;
console.log(x, newValue)
content.style.height=newValue+'px';
Sample:
Codepen link
You need to change the style for your #main div to
#mein {
width: 100%;
position: absolute;
top:70px;
bottom: 0px;
overflow: auto;
}
Related
I have a fiddle with a right and a left sidebars. The bootstrap container class works great with the left side bar with text wrapping and all that.
But the Right Sidebar doesn't work quite right. Text gets tucked underneath it and doesn't wrap correctly. I also want to hide the sidebars at certain media points as well and want the container to work correctly at that point as well...
Can someone give me some pointers on getting my right sidebar and container to work correctly with each other?
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sidebar test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
.sidebar-fixed-left {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
}
.sidebar-fixed-left + .container {
padding-left: 220px;
}
.sidebar-fixed-right {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
right: 0;
}
.sidebar-fixed-right + .container {
padding-left: 220px;
}
</style>
</head>
<body>
<div class="navbar-inverse sidebar-fixed-left">
</div>
<div class="navbar-inverse sidebar-fixed-right">
</div>
<div class="container">
<div class="row">
<h2>Left and Rigth sidebars (Fixed)</h2>
<p>Left and Right sidebars</p>
</div>
</div>
</body>
</html>
I would like to have a text at first (not fixed height) and then a div (that uses openseadragon) to fill the rest of the available space in the window. I don't want scroll bar to appear. How do I do that?
Using this code:
<html>
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta charset="UTF-8">
</head>
<body >
<div >
SOME TEXT HERE
</div>
<div id="openseadragon1" style="width: auto; height: auto; "></div>
<script src="openseadragon-bin-2.1.0/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "openseadragon-bin-2.1.0/images/",
tileSources: "arvore/arvore.xml"
});
</script>
</body>
</html>
And this is what it is happening:
Let's suppose you have top div with a text inside and another div that could be contain everything.
I'm going to calculate the heigh of top div, after that I calculate height of window and finally I do math: (window)-(topDiv)= (height of another div)
by using jQuery we can achieve that:
https://jsfiddle.net/linkers/x0wo280n/1/
HTML:
<div class="text">
some text
</div>
<div class="fill">
</div>
CSS:
body{
margin: 0;
padding: 0;
}
.text{
background-color: red;
}
.fill{
background-color: green;
width: 100%;
}
jQuery:
$(document).ready(function(){
var pHeight = $('.text').height();
var windowHeight = $(window).height();
$('.fill').height(windowHeight - pHeight);
alert(windowHeight);
});
My goal is to have a footer that stays at the bottom of the page if there is little content, and moves to the bottom of all content if the page has a lot of content (requiring a scroll down).
I read this post Flushing footer to bottom of the page, twitter bootstrap , tried the layout and css, but still can't seem to get my page to work correctly.
This is my code layout - maybe I just made a slight mistake?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// Header Stuff
</div>
<div class="container">
<div class="jumbotron">
// h2
</div> // end jumbotron
<div class="row">
//ALL OF THE INFORMATIONAL CONTENT
</div> //end row
</div> //end container
<footer class="footer">
//INFORMATION / LINKS
</footer> //end footer
</body>
and with the name changes to the CSS code...
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.row {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
I think, css flexbox can help you in this. But, just beware of browser support.
HTML:
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
demo: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Click on Toggle Content Button right there to see the difference.
try this one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
I'm setting up a very simple fixed-liquid layout. The header is set to 100%, the sidebar is set at a fixed width and floated to the left, and the width of the content area is not defined (so that it fills the remaining space).
It works well in every browser except IE, where approximately 3 pixels of white space is added between the sidebar and the content area.
I can't reproduce the problem in JSFiddle (even when I copy and paste my exact code), so I've attached images instead. The first image was rendered in Chrome and the second was rendered in IE9.
CSS (styles.css)
body {
margin: 0px;
}
#header {
width: 100%;
height: 150px;
background: #F00;
}
#sidebar {
float: left;
width: 280px;
height: 1000px;
background: #0F0;
}
#content {
height: 1000px;
background: #00F;
}
HTML
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
Have you tried adding a doctype declaration?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
as I've understood, for a div to actually be 100% in height, the parent div needs to be set right?
So, imagine a div structure that looks like this:
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="gallery">gallery</div>
<div class="push">This is inside the push</div>
</div>
<div class="footer">Footer</div>
</body>
This is supposed to essentially be a sticky footer layout based on Ryan Faiths sticky footer layout.
How can in this case the gallery have 100% height as well as the wrapper? I can't figure this out.
My CSS looks like this: Exactly the same as Ryan's CSS, only with the gallery class added.
* {
margin: 0;
}
html, body {
height: 100%;
}
.gallery {
background-color:blue;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%
margin-left: auto;
margin-right: auto;
width:830px;
margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px;
margin-left: auto;
margin-right: auto;
width: 830px;
}
(Deleted all the old stuff)
Here is the new HTML with gallery 100%, hope it works :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}
.gallery {background-color:blue;height: 100%;}
.wrapper {
height: 100%;
margin: 0 auto;
width:830px;
}
.footer, .push {
height: 80px;
width: 830px;
background-color: #CCFF00;
position: fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content gallery">gallery</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I don't know if this is technically an answer, but it's more of an answer than a comment so here goes:
Personally I don't like the Ryan Fait Sticky Footer approach, I much prefer the one used here: http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. To me it's a much cleaner solution and makes more sense from a design and standards point of view. From my experience it works almost 100%, and degrades gracefully the rest of the time.
My 2cents...