Question

我正在使用Bootstrap模板，其页脚固定在页面底部。高度为50px。

然后我想使用从显示器顶部开始并完全在页脚顶部完成的背景图像。这意味着：100％高度 - 50px。这应该在任何监视器分辨率中发生。

我如何使用CSS定义？类似的东西：

background-image {
height: 100% - 50px;
}

Answer 1

您可以使用calc()函数来处理此问题，该函数将使用给定百分比的视口高度以及其他一些显式计算：

 editVIN = (EditText) view.findViewById(R.id.editVIN);
    editVIN.setInputType(InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD | EditorInfo.TYPE_TEXT_FLAG_CAP_CHARACTERS);

    editVIN.setImeOptions(EditorInfo.IME_ACTION_DONE);
editVIN.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if (actionId == EditorInfo.IME_ACTION_DONE) {
                    Utilities.hideSoftKeyboard(getActivity());
                    if (editVIN.getText().length() == 17) {
                        doVINLookup();
                    }
                    return true;
                }
                return false;
            }
        });
        editVIN.setFilters(new InputFilter[]{new InputFilter.AllCaps()});
        editVIN.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {

                if (editVIN.getText().length() == 17) {
                    doVINLookup();
                }
            }
        });

您还可以使用/* This assumes you have a background-size class */ .background-image { /* This sets the height to 100% of the viewport height minus 50px */ height: calc(100vh - 50px); }或您喜欢的任何其他组合/表达。

示例

＆＃13;
＆＃13;
calc(100% - 50px)
＆＃13;
.background { /* This sets the height to 100% of the viewport height minus 50px */ height: calc(100vh - 50px); background: #0071bc; }
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用background-size，其中第一个值为宽度，第二个值为背景高度，然后您可以使用calc()设置身高到100% - 50px

div {
  height: 300px;
  width: 200px;
  border: 1px solid black;
  background-image: url('http://placehold.it/350x150');
  background-size: 100% calc(100% - 50px);
  background-position: center;
  background-repeat: no-repeat;
}

<div></div>

CSS：图片100％高度 - 50px

2 个答案: