--> Skip to main content

Featured

Steps to Create a Project on GitHub

Steps to create a project on GitHub:  1.   Start a repo on GitHub 2.   Make a README.md file 3.   Open vs code – new folder – new terminal – git clone http:…. (from the repo). 4.   In terminal – cd theprojectname   à move into the project file 5.   Ls -la is for showing hidden file à not working for me ???? 6.   Make some changes to README file, in terminal git status à shows all the changes on the file 7.   To add all changes update to the folder à git add . (the dot . means all changes to be added) 8.   Add a new file index.html, in terminal à git commit -m “title of commit” -m “description of commit” 9.   Then git push origin master 10.                 ****Initial a repo in local text editor à git init 11.                 After use git add . etc, when pus...
Read more
Labels

CSS height percentage value of 100% vs. min-height of 100vh - why height:100% wont

During a design of a portfolio website, I was frustrated by not being able to set the height of one part of the page right. 

What I did was in a header tag, I had a single div element for setting up a two-columns grid content. I set the div to be height: 100%, it only covered most of the screen height. If I changed to min-height: 100vh; it will work. 

But I was curious about why the normal height property won't work in my case. After a bit of digging into internet, I found a thread from stackoverflow that explained clearly.
 
What was wrong with my code was that I defined the parental header with a min-height: 100vh; , so I thought the parent container's height has been defined, which is true, but not enough. The child div element has to be set to height: 100%; position:absolute;. I didn't set the position property initially to be absolute, then the lonely height property won't play the trick.
Labels:

Popular Posts