动态面板根据屏幕尺寸的高度

Question

如何根据屏幕尺寸动态增加面板高度

require 'rails_helper'

RSpec.describe V1::DevicesController, type: :request do

  it "shows device info" do
    headers = {
      "ACCEPT" => "application/json",     # This is what Rails 4 accepts
    }

    device = FactoryGirl.create(:device)
    get v1_device_path(device.serial_number), :headers => headers
    expect(response.content_type).to eq("application/json")
  end
end

我在面板主体内有一张桌子。动态数据将添加到其中的位置。 我希望面板有滚动但主页不应该滚动。 面板高度为[Windowheight - 10px]

Web page

我不希望页面滚动，我只想让面板滚动

Answer 1

试试这个css代码：

.panel-body.scroll {  height: calc(100vh - 200px);  }

或

<div class="panel-body scroll" style="overflow:auto; height: calc(100vh - 200px);">

更多详情：

• 100vh是100%视口高度/屏幕的高度。 See more

• calc是一个计算器。在这种情况下，它占据屏幕高度的100％，并从See more中删除200px。

Answer 2

代替高度：100％； 使用高度：100vh

vh 与视口的高度相匹配。