100％宽度减去边距和填充 [英] 100% width minus margin and padding

问题描述

我一直在搜索，但是找不到适用于自己的问题的解决方案.

I have been searching around but I can't find a solution to apply to my own problem.

我正在移动网站上工作，需要输入框的宽度为屏幕的100％.但是我有padding-left: 16px和margin: 5px，它们使框位于屏幕之外，因此我必须向右滚动才能看到框的结尾.如何使包装盒100％减去填充和边距?

I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?

要尝试: http://jsfiddle.net/wuSDh/

推荐答案

您可以使用calc，现代的浏览器也支持calc和IE9 +.

You can use calc, modern browsers support it and IE9+ as well.

div {
  position: absolute;
  height: 20px;
  width: calc(50% - 10px);
  padding: 5px;
}

演示

Demo

浏览器支持

这篇关于100％宽度减去边距和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！