Question

当视口达到450px的高度时，我需要设置div的大小，在我的情况下为#panel-container。

基本上#panel-container会缩小，因为用户缩小了浏览器窗口，使div在视口中始终可见。

我想知道是否可以在不使用JS且仅使用CSS的情况下实现此效果。我知道CSS媒体查询，但我需要在用户重新调整窗口大小时重新调整大小。

我可以使用最新的浏览器以及HTML5和CSS3功能。欢迎任何想法。

＆＃13;

window.app = {
  start: function() {}
};

＆＃13;

 body {
   background-color: darkslateblue;
 }
 #header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px;
   background-color: dimgray;
 }
 #panel-wrapper {
   position: fixed;
   top: 50px;
   left: 0;
   height: 100%;
   background-color: moccasin;
 }
 #panel-container {
   width: 200px;
   height: 400px;
   overflow: auto;
 }

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Builder</title>

</head>

<body onload="app.start();">
  <div id="header">header</div>
  <div id="panel">
    <h1>Title</h1>
    <div id="panel-wrapper">
      <div id="panel-container">
        <div id="panel-content">
          some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long
          text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long
          text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long
          text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long
          text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long
          text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long
          text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long
          text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long
          text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long
          text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long
          text here,some long text here,some long text here,some long text here,some long text here,some long text here. some long text here, some long text here,some long text here,some long text here,some long text here,some long text here,some long
          text here,some long text here,some long text here.
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您可以使用calc将div的高度设置为视口高度的100％，减去标题的高度，然后将其max-height设置为{{} {1}}（或者你需要的任何东西）。

以下是您的简单示例：

400px

*{box-sizing:border-box;}
html{height:100%;}
body{height:200%;margin:0;}
div{
    background:#ccc;
    height:calc(100vh - 50px);
    max-height:300px;
    font-family:arial;
    left:0;
    overflow:auto;
    padding:5px;
    position:fixed;
    top:50px;
    width:25%;
}

Answer 2

您可以使用CSS3媒体查询。 Check out this

类似的东西：

@media (max-width: 600px) { div#YOUR_DIV { width: 100px; } }

Answer 3

解决方案1：

使用div的宽度百分比，例如80％。根据窗口宽度，div的宽度将根据浏览器宽度减小或增加

解决方案2：

如果上述选项失败，则使用媒体查询

class Campaign < ActiveRecord::Base

  has_attached_file :image, :styles => { :default => "500x500>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png"
  validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/

  belongs_to :programme
  belongs_to :user
  has_many :applicants



  has_many :campaign_commissions
  has_many :commissions, through: :campaign_commissions

  has_many :images, as: :imageable

  scope :front, -> { limit(4) }

end

在ccs中使用@media，在html页面中使用@@ media

Answer 4

我不确定这个解决方案的理想程度如何，但确实能达到你想要的效果

#panel-wrapper {
            position: fixed;
            width: -moz-calc(100% - 80%);
            width: -webkit-calc(100% - 80%);
            width: -o-calc(100% - 80%);
            width: calc(100% - 80%);
            z-index: 10;
            padding-right: 80%;
            top: 50px;
            left: 0;
            height: 100%;
        }

        #panel-container {
            width: 100%;
            height: 400px;
            overflow: auto;
            background-color: moccasin;
        }

以上是我从你的代码中修改的内容

Answer 5

我只会在一行中回答这个问题使用 vw代替px ，一切都像图像一样响应

阅读本文以了解

https://css-tricks.com/viewport-sized-typography/

是否可以在不使用JavaScript的情况下重新调整窗口重新调整大小？

5 个答案: