Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css] 第66天 元素竖向的百分比设置是相对容器的高度吗？ #404

Open
haizhilin2013 opened this issue Jun 20, 2019 · 5 comments
Open

[css] 第66天 元素竖向的百分比设置是相对容器的高度吗？ #404

haizhilin2013 opened this issue Jun 20, 2019 · 5 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第66天 元素竖向的百分比设置是相对容器的高度吗？
@haizhilin2013 haizhilin2013 added the css css label Jun 20, 2019
@xiangshuo1992
Copy link
Contributor

xiangshuo1992 commented Jun 21, 2019 •
edited

不是，一般是根据宽度来的，像padding-top,padding-bottom
因为高度百分比的话CSS没办法处理，比如子元素的高度设置为200%，那父元素是不是被撑开了，然后父元素变化了，子元素的200%是不是相对又变化了，所以会造成一个死循环，在CSS里面是没办法处理高度百分比的，高度都是auto。
如果想要实现等比例的盒子模型，可以通过上面的padding-top,padding-bottom属性来实现。

@QingyiHuang
Copy link 

<div style="height: 600px; width: 600px;">
    <img style="height: 100%; width: auto; max-with: 500px;">
</div>

@forever-z-133
Copy link

父级非 auto 的 height 时，子级百分比的 height 才有效。
即使父级有 min-height 或其他子级撑起的高度，子级百分比 height 依旧无效。

@yxkhaha
Copy link

yxkhaha commented Jun 21, 2019

  • 元素竖向的百分比设置高度是相对父级的高度，但是margin 和padding 是参照父级的宽度来设置的。

@MrZ2019
Copy link

MrZ2019 commented Jan 6, 2021

  • 元素竖向的百分比设置高度是相对父级的高度，但是margin 和padding 是参照父级的宽度来设置的。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@MrZ2019 @haizhilin2013 @QingyiHuang @xiangshuo1992 @forever-z-133 @yxkhaha