仅使用 CSS 设置宽度等于高度

Question

I'm trying to design a wesite for mobile with a button in the top left corner, which is set to 100% height of the parent object. The width should be the same as the height , but I found only solutions with JS or JQuery. I like to have something like:

.hamburger {
    height: 100%;
    width: height;
}

Answer 1

The solution is that a height of 9% of the viewport match with 9vh. The parent was 9% of the viewport height, the child 100% of the parent's height. To become a perfect square you set the width to 9vh. 1vh is equal to the 100. part of the viewport height. So now you can scale the viewport to any size and have always a sqare.

Answer 2

    .hamburger{

    width:100vw; /* 100% of the viewport width */
    height: 100vw;
}

you can find details on link here