i made a website some time ago link: https://randomchess.netlify.app and after that i forget about it and now when i opened it again, it was not working properly even though no changes have been made i soon get to know it is happening because 100% height is not working as it was used to, i opened the website in chrome (linux version), the code is as follows
body {
height: 100vh;
width: 100vw;
}
.blur {
height: 100%;
width: 100%;
display: block;
}
.board {
height: 70%;
display: grid;
}
#chessboard {
height: 100%;
aspect-ratio: 1/1;
display: block;
background: red;
}
<body class="vsc-initialized">
<div class="blur">
<section class="board" id="Board">
<div id="chessboard">
</div>
</section>
</div>
</body>
As i have checked your website, #board id you have added here and you have given padding 5%. so it will reduce the chessboard by 5% of it's total height and width. you should remove that padding, then it will work fine
Related
I have a div that acts as drawer that the user can pull down from the top of the window, that contains a dozen of buttons with some styling.
the code for expanding/collapsing that div while pulling on it is:
drawer.style.height = `${Math.min(drawerParams.maxheight,drawerParams.startHeight + event.y - drawerParams.startY)}px`;
It works fine on a computer, but I have serious lagging on a mobile phone. Here is a picture of the chrome devtools for mobile devices:
Here is the structure and CSS for that layout:
<style>
.main {
position: relative;
width: 100%;
height: 100%;
}
.drawer {
position: absolute;
top: 0;
width: 100vw;
background-color: lightgreen;
min-height: 7px;
z-index: 4;
}
.drawer-content {
position: absolute;
bottom: 7px;
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
}
.handle {
position: absolute;
width: 100%;
bottom: 0;
height: 7px;
}
</style>
<div class="main">
<div class="drawer">
<div class="drawer-content">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
<div class="button">button...</div>
<div class="button">button10</div>
</div>
<div class="handle">
<!-- some svg -->
</div>
</div>
</div>
If I set the initial drawer's position to "top:200px", I see that the content is already there, and when pulling on it from that position, I have the same performance issues.
I tried to use transform:translateY() like in this article:link, but it had no effect. (I assume it is because instead of having one translate from the begining of the transition to the end, I have one for each pixel of mouse movement..?)
So the questions are (from the picture):
1: is the browser repainting the div each time the drawer element's height changes?
2: why?
3: what can I change to avoid that?
Heres an image of my website right now: http://i.imgur.com/nE0a0cj.jpg
The section says "What is Spheroid" is ment to be my content container. However, I can't seem to make it go from the header to the footer.
My HTML code:
<div id="container">
<h2>What is Spheroid?</h2>
</div>
My CSS Code:
html, body {
background-image:url(001.png);
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
}
#container {
width: 800px;
height: 100%;
text-align: center;
margin: 0 auto;
background-color: #38788E;
}
I've tried using the "height: 100vh;" property, but it makes the container go beyond the footer so the page needs to be scrolled.
Also think it might have to be done with JavaScript, but that's a field where I'm going to need some support.
Thank you guys in advance :)
EDIT -
So I figured from one of the answers, that my div was inside another div. So I fixed this, and with the same code as provided it not looks like this: http://i.imgur.com/vYRVqhN.png
Thought it might have been the bg size, but as it is only set to "cover" it shouldn't be the issue.
Finally got your requirement, flex box layout is your friend.
View the demo in full page mode:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
flex: 1;
width: 800px;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
Another approach with box-sizing:
html, body {
height: 100%;
margin: 0;
}
body {
box-sizing: border-box;
padding-bottom: 70px;
background: #eee;
}
header {
height: 40px;
background: lightgreen;
}
#container {
width: 800px;
height: 100%;
background: yellow;
margin: 0 auto;
}
footer {
height: 30px;
background: lightblue;
}
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
It seems like you placed your <div id="container"> inside another div or any parent element (except html and body). If so, the parent element/s don't have a height of 100%. If you add height:100%; to the parent element your container must fill the entire height of the parent element.
I tested your code provided and it's working.
I'm making a simple IDE for a educational programming language similar to Karel the Dog. And I have trouble with making base html page.
I have 4 areas:
Toolbox (for buttons like open, save as, run etc.)
Field (canvas for drawing executor that can move on the field and do some stuff)
Code (CodeMirror editor for writing executor's commands)
Console (place where IDE can print messages like compilation errors or runtime debug output)
I wrote what I want from every area in my code so I'll say only what is not working now:
The page should fill 100% screen's height.
Cannot set CodeMirror to fill all available to its parent height. And when its size is greater than parent's height, scrollbars should appear.
The same problem with canvas - but only on vertical.
Is there a way to make a separator between code and field areas that can be used to redistribute horizontal space between areas?
There is another difficulty. If the item number 4 requires JavaScript, then I'll ask to help me with solving it with WinJS 3.0 library because I won't add to the project jQuery or other heavy stuff only for this resize capability.
So, can anyone help me?
I loaded my code to jsfiddle.net and pasted it here:
var ce = CodeMirror(document.getElementById('b-codemirror'), {
value: "\n\n\nIt is CodeMirror element. [PARAMS ALL] " +
"width: 100% of parent element, height: always 100% of" +
" parent element + both scrollbars if needed\n\n\n",
lineNumbers: true
});
var cc = document.getElementById("canvas").getContext("2d");
cc.font = "16px Helvetica";
cc.fillText("It is canvas. Can be resized from", 10, 30);
cc.fillText("JS. If it is larger than parent element,", 10, 60);
cc.fillText("corresponding scrollbar should appear.", 10, 90);
#import url("http://codemirror.net/lib/codemirror.css");
/* overriding default codemirror.css */
.CodeMirror {
font-family: monospace;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.b-section {
margin: 2px;
padding: 4px;
border-radius: 4px;
}
#b-fieldcode {
min-height: 640px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#b-toolbox {
background: #ffeebb;
}
#b-console {
height: 100px;
background: #ffeebb;
}
#b-field {
background: #ccccff;
overflow: auto;
-webkit-flex: 1 1 40%;
flex: 1 1 40%;
-webkit-order: 1;
order: 1;
}
#b-code {
background: #dddd88;
-webkit-flex: 1 1 60%;
flex: 1 1 60%;
-webkit-order: 2;
order: 2;
}
#media all and (max-width: 1024px) {
#b-fieldcode, #page {
-webkit-flex-flow: column;
flex-flow: column;
flex-direction: column;
}
#b-code, #b-field {
-webkit-order: 0;
order: 0;
}
#b-field, #b-code {
height: 500px;
}
}
<script type="text/javascript" src="http://codemirror.net/lib/codemirror.js"></script>
<div id="b-toolbox" class="b-section">
Here comes the space for buttons.
[PARAMS ALL] width: 100% of screen, height: sized to content
</div>
<div id="b-fieldcode">
<div id="b-field" class="b-section">
Here comes canvas wrapper.<br />
[PARAMS landscape] width: flex 40% of screen, height:
100% of screen minus b-toolbox and b-console.
<br />[PARAMS portrait] width: 100% of
screen, height: fixed 400px.<br />
<canvas width="300" height="300" id="canvas"
style="background-color: green" />
</div>
<div id="b-code" class="b-section">
Here comes CodeEditor wrapper.<br />
[PARAMS landscape] width: flex 60% of screen, height:
100% of screen minus b-toolbox and b-console.<br />
[PARAMS portrait] width: 100% of
screen, height: fixed 500px.
<div id="b-codemirror"></div>
</div>
</div>
<div id="b-console" class="b-section">
Here comes output console.
[PARAMS ALL] width: 100% of screen, height: fixed 120px.
</div>
First of all, you need to split styles for portrait and landscape. For portrait part, that's simple easy, so let's skip it.
For landspace part, you need a fluid height header (buttons) and a fixed height footer (console). This is a typical use case of css flex - all spare space are going to main part. So you just set display: flex; flex-direction: column; to <body> and flex: 1; to the main part (#fieldcode in your snippet).
Then #field occupies 40% width of #fieldcode, and #code ocuppies 60%. So again, you set display: flex; flex-direction: row; to #fieldcode, and flex: 4; to #field, flex: 6; to #code, so that spare space of #fieldcode is separated as 4:6. But please note the difference from previous. Yes, the flex-direction value is different. That tells the browser either to separate horizontally, or vertically.
html, body {
margin: 0;
padding: 0;
}
#toolbox {
background: #feb;
}
#field {
background: #ccf;
overflow: auto;
}
#code {
background: #dd8;
overflow: auto;
}
#codemirror {
min-width: 100%;
min-height: 100%;
}
#console {
background: #feb;
height: 120px;
}
#media screen and (orientation: portrait) {
#field {
height: 400px;
}
#code {
height: 500px;
}
}
#media screen and (orientation: landscape) {
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#fieldcode {
flex: 1;
display: flex;
flex-direction: row;
}
#field {
flex: 4;
}
#code {
flex: 6;
}
}
<div id="toolbox">buttons here</div>
<div id="fieldcode">
<div id="field">
<canvas></canvas>
</div>
<div id="code">
<div id="codemirror"></div>
</div>
</div>
<div id="console">console here</div>
am trying to emulate this theme:
http://themetrust.com/demos/ink/?project=the-city-of-samba
But instead make the blog post always remain centered in the right hand side (space outside of the fixed sidebar) and have the blog post be of a % width.
I currently have this set up on my site, but am using a percentage based sidebar which looks awful.
Here is a JSfiddle recreating in basic terms the theme from above:
http://jsfiddle.net/Uyv6w/4/
All i am after is to make that grey inner div always remain centered inside the red content div.
Incase JSFiddle goes down and for future ref:
HTML:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
CSS:
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
width: 100%;
}
#sidebar {
height: 100%;
width: 100px;
background-color: #9b59b6;
position: fixed;
}
#content {
width: 100%;
background-color: #f00;
}
#inner {
width: 60%;
margin-left: 150px;
background-color: #888;
height: 1000px;
}
Thanks.
There are just 2 properties to change in ordre to make this work the way you want :
#content {
/* width: 100%; */
margin-left: 100px; /* the width of you sidebar.
Since #content is a div, a block-level element
, its width will be automatically 100%
, minus the margins */
background-color: #f00;
}
#inner {
width: 60%;
/* margin-left: 150px; */
margin-left: auto;
margin-right: auto; /* having margin-left & right set to auto will center your div.
you could also use "margin: 0 auto" */
background-color: #888;
height: 1000px;
}
I have updated you JSFiddle example here : http://jsfiddle.net/Uyv6w/5/
http://jsbin.com/requv/1/edit
if you set body, html (and the container) to height 100%, it will not be able to to scroll.
the height should be more then 100%.
I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)
Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.
For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.
Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/
Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/
Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You should try this:
img {
min-width:100%;
min-height:100%;
}
I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/
It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}
We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.
I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.
Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!
The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}