In this fairly simple HTML page and CSS stylesheet, both the body and html elements are set to "height: 100%;" and yet the page is slightly longer than the window, creating a scrollbar that I don't want.
I've read through many stack exchange posts about this issue of extra space at the bottom of a page, but have not managed to find a fix or an explanation that works for me.
I am fairly certain that the problem is not being caused by a stray text node in the DOM. I have tried removing all extra white space in between tags in the HTML file to no avail. I have tried styling the body with "min-height: 100%", but then the purple content of the page no longer takes up 85% of the whole window as it did before. I have tried setting "overflow: hidden;" on the html element, which seems to work, but I have no idea why it does. I have even tried using a flexbox to achieve the functionality displayed in the code, but I haven't been able to make that work either.
When I right click on that extra unwanted yellow space on the bottom and click "Inspect Element" I get directed to a "buttonWrapper" div, but I have no idea why this would be causing any problems.
A valid explanation of why this is happening is more important to me than a solution right now (hence my dissatisfaction with the "overflow: hidden;" method). If you do have a solution, I'd prefer it would be entirely CSS based.
Thanks for taking the time to read this.
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
width: 100%;
height: 100%;
}
body {
background-color: grey;
width: 100%;
height: 100%;
}
#titleSection {
width: 100%;
height: 15%;
text-align: center;
font-size: 10vmin;
}
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
}
.buttonWrapper {
width: 50%;
height: 100%;
display: inline-block;
}
.buttonImage {
height: 100%;
width: 100%;
object-fit: contain;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="icon" href="" type="image/x-icon" />
<script src="code.js"></script>
</head>
<body>
<div id="titleSection">Who's going to set up the board?</div>
<div id="contentSection">
<div class="buttonWrapper">
<img src="http://orig15.deviantart.net/7e51/f/2013/293/e/9/owl_face_by_cypher2-d6r9e23.png" class="buttonImage">
</div><!--
--><div class="buttonWrapper">
<img src="http://eredivisiezeilen.nl/wp-content/uploads/2015/04/1429207962_male3-512.png" class="buttonImage">
</div>
</div>
</body>
</html>
Change it to this:
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
font-size: 0;
}
Related
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
I am pretty new to web development so I am facing a margin issue which I think I might be due to position element in css,I'm not sure though .Here in code I have posted below is just a code for practice purpose on position element in css.
Here's my html code:
<!DOCTYPE html>
<head>
<title>Position Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header>
<span class="title-text">Position Demo</span>
</header>
<div class="container-1"></div>
<div class="container-2"></div>
</body>
And here's my css code:
html {
font-size: 62.5%;
}
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.title-text {
font-size: 3rem;
text-align: center;
display: inline-block;
}
.container-1 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 0;
margin-right: 0;
background-color: rgb(218, 173, 173);
}
.container-2 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 30%;
margin-right: 0;
background-color: rgb(149, 218, 183);
}
What you are facing in inspect mode, is not margin.
Just to make sure:
Each element, without changing the display property of the parent element, is placed below it's sibling element. I mean elements are displayed in the page based on their place in your html.
That's why browser shows that yellowish line right of the boxes, it means that this line is taken.
I suggest you set the display property for each section in html.
I am developing a web-application which frequently uses tooltips. The application is styled using the Bulma CSS library along with the Bulma Tooltip Extension. Some elements in my application have internal scrolling (with their overflow-y property set to 'scroll' or 'auto'). Setting overflow-y to 'scroll'/'auto' automatically sets overflow-x to 'hidden (this is inevitable according to other answers).
This is causing overhanging tooltips to be cut off, as can be seen in this sandbox:
While I understand that having a visible x overflow with a scroll-able y overflow is impossible, I imagine that there is some work around/solution that will allow at least allow for the appearance of displaying an overhanging tooltip in a scroll-able element. In my case, allowing for visible overhang on the x-axis is more important (no other question/answers address/resolve this exact issue).
Any help will be greatly appreciated.
#testDiv {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 75px;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button {
margin: 10px;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div id="testDiv">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
</div>
</body>
</html>
.
You can create another div element (.wrapper) that will have default overflow settings. It will be a container for your #testDiv and .button.
Now, Add position: relative to .wrapper.
.button now can be positioned absolutely, to just look like it's inside #testDiv element, but technically - it isn't :)
#testDiv element need to be expanded to 100% width and height, to inherit size from .wrapper
Last step - add some padding-top to #testDiv to prevent content overlap on .button element.
Look at code below:
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 75px;
}
#testDiv {
height: 100%;
width: 100%;
padding-top: 50px;
border: 1px solid black;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button.tooltip {
margin: 10px;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div class="wrapper">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
<div id="testDiv">
content
</div>
</div>
</body>
</html>
I hope this solution will suffice :)
Try this:
.tooltip {
position: absolute;
}
I'm currently trying to make a landing page and I have a problem. There are some white stripes all around the <img>, it looks like this.
I would like the picture to be full-screen, without any stripes etc.
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<img src="background.jpg" id="background"> </img>
</div>
</div>
</body>
</html>
And here's CSS:
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: auto;
opacity: 0.6;
position: relative;
}
There is padding automatically applied to the body.
Just add this to your css
body{
padding:0;
margin:0;
}
Edit: Solution to follow up in comments
You will need to remove the <img> tag and change your background div in your css
#background
{
width: 100%;
height: auto;
background: url("background.jpg");
background-size: cover;
opacity: 0.6;
position: relative;
}
By default, each HTML tag has a browser-predefined appearance/style, in your case, body has margin: 8px on Chrome, for example. You need to reset all of those predefined styling rules in order not to have surprises, read about CSS resets at https://cssreset.com/what-is-a-css-reset/
Moreover, in order to stretch the image to cover all the visible area, you need to make sure body has width: 100vw; (viewport width) and height: 100vh; (viewport height) and everything else has 100% on both or inherits them from their parents.
Working snippet at https://codepen.io/Raven0us/pen/KZQejX
The browser applies its own default styles to websites that you can alter with your own css. Take a look at this cheat sheet
An Easy fix for your issue is to add css:
body{
margin:0;
}
There are quite a lot of questions regarding iframe and it's height. Some are similar but not giving me the right answer. So let me explain my case:
JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Editor: http://jsfiddle.net/AmVhK/3/
There is a table with 2 rows. First one contains a div #toolbar with fixed height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.
Problem I am facing is in IE standards mode (supporting IE8+). Let's say, the height of the window is 1000px and height of toolbar is 200px, then the height of the iframe is also 1000px and so has scrollbars. I need the iframe to have height of (page height-toolbar height).
It would be good if there is a CSS solution. Using JavaScript to get the height available and setting it to the iframe or it's containing div is the last resort solution for me :)
Setting the toolbar or iframe to absolute position also won't work for my use case. Markup change is ok if necessary (if you want to remove tables)
I have already set the following CSS:
html, body {height: 100%}
Any good solution to implement it.
OK here's my attempt at this, there's an issue with the iframe wanting to have a horizontal scroll in IE7 but the layout is good, I had to give up because fighting with IE7 makes me want to chew out my own eyes, hopefully someone could expand from here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iframelayout</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div, iframe {
margin: 0;
padding: 0;
border: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #222;
}
.toolbar {
height: 200px;
background: #aaa;
}
.iframe-container {
position: absolute;
top: 200px;
bottom: 0;
width: 100%;
background: #555;
overflow-y: hidden;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
</div>
<div class="iframe-container">
<iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
</div>
</div>
</body>
</html>
Here is a solution tested in IE8 and FF17
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type="text/css">
*
{
border: 0;
line-height: 0;
margin: 0;
padding: 0;
}
html,
body
{
height: 100%;
}
#layout
{
position: relative;
width: 100%;
min-height: 100%;
overflow-y: hidden;
background-color: green;
}
#toolbar
{
width: 100%;
height: 200px;
background-color: blue;
}
#content-wrapper
{
position: absolute;
top: 200px;
bottom: 0px;
width: 100%;
background-color: red;
}
#content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://c9.io/" border="0"></iframe>
</div>
</div>
</body>
</html>
This is as clean as it can get minding your original question mentions the toolbar has a fixed height. Minimal code, no wrapper elements and no tables necessary, IE8+/Chrome/Fox compatible.
However, in the comments of Dale's solution, you mention the toolbar height being flexible instead and a requirement for the iframe to adjust - that is a major gamechanger and I would suggest you strip that of your requirements as it's practically impossible to achieve in CSS2 without extra JS and/or horrendous CSS hacks. If you didn't want IE<=9 compatibility, this would be very possible using CSS3 flexbox.
Since the reason for the toolbar flexible height would be animation for different states as you mentioned, I would suggest you use the code below and animate the toolbar height and iframe padding-top at the same time to achieve the desired flexibility instead of just the toolbar height. It does not require any extra JavaScript outside of the animation itself, so the only "disadvantage" is to animate 2 properties instead of 1. The rest of the layout will finely adjust.
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#toolbar {
position: absolute;
width: 100%;
height: 200px; /* animate this */
}
#cblt_content {
display: block;
width: 100%;
height: 100%;
padding-top: 200px; /* and this */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 0;
}
</style>
<div id="toolbar">Toolbar</div>
<iframe id="cblt_content" src="https://c9.io/"></iframe>
Getting rid of the vertical scroll
Using this code should leave with only the inner (iframe) scrolls:
html, body
{
height: 100%;
width: 100%;
position: fixed;
}
Notes:
The width is needed (like with absolute).
You are right about absolute not helping you.
This actually makes sense for what you are trying to achieve (if I got it right).
Browser Support:
Might be a little buggy, but should be supported as of IE7 (quirksmode).
Hope I got the question right.
The solution is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - Webduos Demo</title>
<style type="text/css">
*{ border: 0; line-height: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
#layout { position: relative; width: 100%; min-height: 100%; overflow-y: hidden; background-color: green; }
#toolbar { width: 100%; height: 160px; background-color: blue; }
#content-wrapper { position:absolute; top:180px; bottom: 0px; width: 100%; background-color: #0000dd; }
#content {width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://google.com/" border="0"></iframe>
</div>
</div>
</body>
</html>
I think you can simply hide the parent scroll bar and get what you want. Like by simply adding overflow-y hidden:
html, body {
height: 100%;
overflow-y:hidden;
}
This should do it! Here's the quick preview link: http://jsfiddle.net/AmVhK/15/show/
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#contentiframewrapper, #cblt_content {
/* max-height: 100%;
min-height: 99.9%;*/
height: 99.9%;
margin: 0;
padding: 0;
line-height: 0;
}
#toolbar {
height: 100px !important;
background-color: #CCC;
text-align: center;
font-size: 50px;
vertical-align: middle;
}
</style>
<table width="100%" height="99.6%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" id="toolbar">Toolbar
</td>
</tr>
<tr>
<td width="100%" valign="top" height="80.5%">
<div align="center" id="contentiframewrapper">
<iframe width="100%" frameborder="0" name="cblt_content" id="cblt_content" src="https://c9.io/" border="0"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
I've tested it in both Chrome and IE8 and it works on my side. It might bug in JSFiddle in IE8 but it shouldn't if you view it as a separate page (in normal conditions that is).
Edit:
Made some slight changes to the original code. However, you will have to change the <td> that holds the iFrame height value to the new height if you change the height of the toolbar. With IE there is no magic % value (unless you use JS, which you don't want of course) for it, it's just trial and error.