I am working on the second version of my new web app Trekeffect and I want my interface content to be 100% of the pages height, but I just can't seem to figure it out. I make the HTML, body and all other parent elements 100% height, but no matter what I do the height never fills the document.
This screenshot shows my issue:
You can view the issue by visiting: http://dev.trekeffect.com/home
and then by clicking on any of the cities listed: Example: Anchorage, Alaska
I've played around in Firebug and no matter what I do I can't get this working. Please help!
It is because of this:
html, body {
height: 100%;
}
.three_col .right {
height: 100%;
}
Remove those, and your problem is solved!
The reason this is causing a problem, is because CSS sets the body to a height of 100% of the available screen space.. Therefore any content below this is considered overflow.
Related
I work on a school project that has a website. The website is made by other graduated students and I have almost no HTML or CSS knowledge.
I want the website to be more mobile friendly, meaning that every frame and object gets resized according to what display size you have. Now there is text outside the display, iframes being too big, e.t.c. I have tried to fix this for hours by searching online without any major results.
The thing I've discovered is that changing from overflow-x: auto to overflow-x: hidden (in a CSS file) can help to remove overflow/bleed.
If you have any tips on how I can improve this page it would be strongly appreciated. Feel free to inspect the code using browser tools (CTRL+SHIFT+I).
How do I resize iframes, text, images, e.t.c. according to the width and height of the display?
Why is the footer text outside of the screen, and how can I fix it?
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
read this, you can also use bootstrap grid to make things easier
For skips the most of overlaps that could occur in the page, try to use the configuation below:
html, body {
// reset the browser config
margin: 0;
padding: 0;
}
* {
box-sizing: border-box; // padding and border will not be added to width and height calc
}
img {
max-width: 100%; // protect from images be more large than the container
}
// https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizing: border-box; will help you in mostly cases, but in some cases, after you inspect the element with overlap width, will can use the calc() to fix it, like:
element {
width: calc(100% - 30px);
}
In you case at https://aqpi.se/karta.html the problem is you setting a fixed width on the iframe element.
With overlap
Without overlap
Responsive web sites are created with media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
I am creating a mockup for a new UI using Angular and Material design elements, however I am experiencing trouble attempting to get the area underneath my toolbar to take up the remaining vertical height of the page.
Here is a link to my code example
I have Googled the problem and the only thing I have seen is the solution to set
html, body {
height: 100%;
}
However I have not found this to be a solution.
I was thinking of perhaps using a flex box, but I am unfamiliar with how they are used.
Any help would be appreciated.
UPDATES & SOLUTION
I opted not to go the flexbox route as I was wanting something quick as a solution and flexbox can be something I look more into in the future.
After deciding that I wanted a static nav bar, of which was not occurring when first coded, I set upon using a CSS calculation to utilise height: 100vh and subtract the overhang that this caused.
mat-sidenav-container {
height: calc(100vg - 64px);
}
I found however, that when shrinking the size of the window, the responsive nature of the material elements meant that the toolbar would reduce in height somewhat. This led to a blank bar below the page content as the amount to subtract would need to be less in this situation.
The fix for this was to add an #media change for the specific page width the shrinking is triggered. I was then eventually left with the following:
mat-sidenav-container {
height: calc(100vh - 64px);
}
#media (max-width: 600px) {
mat-sidenav-container {
height: calc(100vh - 56px)
}
}
This may not be the best solution for the problem, but so far I have found this to be one solution that works.
Ok, here is what worked for me in with the code you gave me:
I added the style="height:100%" to the following classes:
html, blitz-app, to the secondary div and to the mat-sidebar-container
Edited: Changed the style of the html tag to: height:calc(100% - 64px);
Reason: the 64px is the height of the toolbar
I added it all in the chrome browser debugging console, because I couldn't find the actual classes the code is using, but I am sure you can :)
Hope I could help.
I'm trying to make my wordpress site always display with 100% width. My wordpress-css has no mobile specific css. When I visit the site on mobile, the site is not longer 100% width, despite the css saying that it should be. I'm currently testing stuff in the css and therefore not linking the site.
EDIT: I now tried removing all width-specifications in the entire css, the word "width" is not present anywhere in the css. The html still locks to exactly 320 pixels, same as the width specified by the iPhone4. This could be an issue with wordpress and not the css file.
The really weird thing is that if I scale up the window, and then scale it back down, it looks like it should look:
This is the css:
body, html {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
color: #333;
min-width: 100%;
margin: auto;
}
I have the viewport-thing at the top of my html:
<meta name="viewport" content="width=device-width">
However I have not been able to add the "initial-scale=1" into the wordpress html. From what I read I doubt that this is the problem though.
Any suggestions what could be wrong? As a sidenote: It does fail to display 100% width on an actual mobile device as well, it's not just the chrome device simulator failing.
A hint could be that it seems that even wordpress itself misjudges the width of the screen, as can be seen by the wordpress header not filling up 100%
By request of rsn, I will sum up our discussion as an answer. Creds to rsn and everyone else for finding the issue!
In this case, the width itself is set properly. The problem is that things move outside the 100% width and the site tries to scale everything down to fit the stuff moving outside of 100% width. This caused everything else to scale down, including the font size of the text which I thought was an entirely different problem. So, after specifying:
.img {
max-width: 100%;
}
The site worked fine. Except for one last detail, I also has a really long link that, despite having word-wrap: break-word, ended up being wider than the width. To solve this I added:
.long-link {
word-break: break-all;
}
And now nothing moves outside the 100% width, and everything works as it should.
I have the following problem: in my web page when I reduce the size of the window, a horizontal scrollbar appears below as if I would had content that exceed the size of the window. But when I took a look at it I can't identify the problem: isn't the navbar (that is "fixed") and neither one of the elements of the sponsors that is floated. I have deleted both of them and the problem persists.
I'm pasting a link to the webpage and I would be very grateful if anyone could help me. If anyone need some of the HTML or CSS code please ask me and I will provide it.
http://alvaroalonso.net/
Update the width 1300px to 100%.
.nosotros .wrapper {
width: 100%;
}
The answer is the fixed width of this div:
.nosotros .wrapper {
width: 1300px;
}
Which instead should be set to 100%.
I'm having an issue getting my body content to scale properly.
It will open to 100% when the page is opened and if you re-size the screen wider it gets bigger but if you go smaller it stays at whatever the widest you stretched it to was.
Netsuite uses an insane amount of tables to structure things which I think may be causing the problem. Here is the link to my sandbox site:
http://shopping.sandbox.netsuite.com/s.nl?c=3573268
We just started development so forgive the mess.
I notice that when I check it in Chrome's dev tools it tells me that the body content div scales with the screen but the table that resides just inside it is what is sticking to the max width.
How do I get this table to inherit the width of the body div?
Figured it out.
I had to assign the following properties to the containing div that lies within all the tables:
.mainContents {
position: absolute;
z-index: 999;
width: 100%;
min-width: 1024px;
}
I couldn't tell you the logic behind why it works, but it works. I tried about a thousand other things that would have made more sense but what ever...