I have an index.html markup as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
To apply styles, I use main.css whose content is as follows:
#pagecontent {
border: none;
height: 100%;
width: 100%;
}
The width of the iframe is assigned correctly. That is, when I resize the browser window, the width of the iframe is adjusted accordingly. However, the height is always the same. It is about 300px and does not expand to the height of the browser window. I tried this in FF 45 and IE 11.
Question: What is the reason for the height not being adjusted in the same way as the width when applied to the iframe?
You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.
So you have to give height in px here
#pagecontent {
border: none;
height: 400px;
width: 100%;
}
working example : https://jsfiddle.net/uxq4pzc1/
#pagecontent {
border: none;
height: 100vh;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
iframes by default are inline so try line-height instead or use display: block Also 100% of what? 100% of whatever contains the iframe so you should wrap iframe in an element and set a height explicitly.
Whenever I use an iframe, I wrap it in a block level element and set position: relative. Then I place position: absolute top:0; bottom:0; right: 0; left: 0; on the iframe. Whenever you want control over the iframe, use it's parent instead.
See this post for details
#pagecontent {
border: none;
height: 100%;
width: 100%;
display: block;
}
.box {
height: 20em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<div class="box">
<iframe id="pagecontent" src="http://example.com"></iframe>
</div>
<footer>...</footer>
</body>
</html>
Related
I want that the <object> or <iframe> element has the same measures like its content.
Given are two simple html files.
square.html (want to inject into the main file)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
:root {
--hk-mes: 300px;
}
html,
body {
width: var(--hk-mes);
height: var(--hk-mes);
margin: 0;
padding: 0;
}
.square {
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html,
body {
margin: 0;
padding: 0;
display: inline-block;
}
.have-measures-of-content {
width: auto;
height: auto;
border: 0;
}
</style>
</head>
<body>
<object class="have-measures-of-content" data="./square.html"></object>
</body>
</html>
The <object> element has a size of 300px/150px (width/height). How can I make that it has automatically the size of its content, in this case 300px*300px, with plain html / css?
Another weird thing is that if I set the <object> or <iframe> manually to 300px/300px (width/height) the scrollbars don't disappear – I must set the height to 304px ... From where the 4px come from? The 4px come from display: inline-block. display: inline-flex doesn't add 4px to bottom ...
I don't understand why this is happening
I am a beginner and hardly know anything so please do make it simple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.main{
background color: yellow;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
Actually, this is background-color: yellow; no background color: yellow;
You missed the - between background and color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style media="screen">
.main{
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">this is test</div>
</body>
</html>
Two issues
Your background color definition is wrong. You should use background-color instead of background color.
In order for the div to get displayd inside the dom, you should have some content inside the div or you should define the dimension (width and height) of the div.
.main-1 {
background-color: yellow;
}
.main-2 {
background-color: yellow;
height: 25px;
width: 25px
}
<div class="main-1">
You need to have some contents inside the div,
or you should have defined the dimension of the div
just as below
</div>
<div class="main-2"></div>
I am new to SVG apologies! I am having an issue with an SVG where I have it set to max-width: 60% but it seems to take precedence over the overall height of the elements.
I want it so the overall height of the row is 50vh. But even if I set it and remove the max-width from the SVG it still is taking precedence over the set vh. If anyone has any suggestions on the best way to approach this?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="safetyFreelancer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
body {
background: #f3f4f5;
}
.wave-container {
position: relative;
background: #ce1212;
color: #FFF;
text-align: center;
overflow: hidden;
}
.wave-container > svg {
display: block;
background: #ce1212;
}
.vh {
height: 50vh !important;
}
</style>
</head>
<body>
<div class="wave-container">
<div class="row vh">
<div class="col-md-6">
<h1 class="text-center">Welcome</h1>
</div>
<div class="col-md-6">
SVG
</div>
</div>
SVG
</div>
</body>
</html>
I did not enter the SVGs as it maxes out the character count
If I undestood correclty you want to set width for your svg. If yes, then you can just set through this new rule:
.col-md-6.test > svg {
width: 50%;
}
The jsfiddle example can be seen here.
So, I've researched how to make div 100% height of the screen, but if I put another div in HTML right below the first one, only the last div appears. I want to make website where each div behaves like a slide.
Here's the code I've used:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<title>Test portfolio</title>
</head>
<body>
<div id="wrapper" class="overlay"></div>
<div id="wrapper2" class="overlay">allooo</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
html, body{
background:url("backgrounds/escheresque_#2X.png");
min-height: 100%;
margin:0;
}
#wrapper{
height:100%;
background:#fff;
}
#wrapper2{
height:100%;
background:#c60;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10;
}
By setting each div to position: fixed you put each one of them on top of one another, relative to the viewport. Remove the .overlay class and you’ll display them one below the other. If you want to have only one at the screen at a time and no scrollbar you’ll have to resort to using JavaScript.
And here is a link to an example with one following the other http://jsbin.com/UvOXUXI/1/
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>