Question

首先，我想隐藏正常的Window Scrollbar。

这些是我想要的改变：

黄色部分高度应为自动（可以超过页面的高度）
滚动条必须位于黄色，白色和绿色部分
当我滚动时，我希望黄色，白色和绿色部分一起移动
当我调整页面大小（垂直或水平）时，上述所有内容仍然可以正常工作

当前HTML

CREATE TABLE "HR"."LOCATIONS" 
(   "LOCATION_ID" NUMBER(4,0), 
"STREET_ADDRESS" VARCHAR2(40), 
"POSTAL_CODE" VARCHAR2(12), 
"CITY" VARCHAR2(30) CONSTRAINT "LOC_CITY_NN" NOT NULL ENABLE, 
"STATE_PROVINCE" VARCHAR2(25), 
"COUNTRY_ID" CHAR(2), 
 CONSTRAINT "LOC_ID_PK" PRIMARY KEY ("LOCATION_ID")
 USING INDEX PCTFREE 10 INITRANS 2 MAXTRANS 255 NOLOGGING COMPUTE 
STATISTICS 
STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT 
FLASH_CACHE DEFAULT CELL_FLASH_CACHE DEFAULT)
TABLESPACE "EXAMPLE"  ENABLE, 
 CONSTRAINT "LOC_C_ID_FK" FOREIGN KEY ("COUNTRY_ID")
  REFERENCES "HR"."COUNTRIES" ("COUNTRY_ID") ENABLE
) SEGMENT CREATION IMMEDIATE 
PCTFREE 10 PCTUSED 40 INITRANS 1 MAXTRANS 255 NOCOMPRESS NOLOGGING
STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT 
FLASH_CACHE DEFAULT CELL_FLASH_CACHE DEFAULT)
TABLESPACE "EXAMPLE" ;
COMMENT ON COLUMN "HR"."LOCATIONS"."LOCATION_ID" IS 'Primary key of 
locations table';
COMMENT ON COLUMN "HR"."LOCATIONS"."STREET_ADDRESS" IS 'Street address 
of an office, warehouse, or production site of a company.
Contains building number and street name';
COMMENT ON COLUMN "HR"."LOCATIONS"."POSTAL_CODE" IS 'Postal code of 
the 
location of an office, warehouse, or production site
of a company. ';
COMMENT ON COLUMN "HR"."LOCATIONS"."CITY" IS 'A not null column that 
shows city where an office, warehouse, or
production site of a company is located. ';
COMMENT ON COLUMN "HR"."LOCATIONS"."STATE_PROVINCE" IS 'State or 
Province where an office, warehouse, or production site of a
company is located.';
COMMENT ON COLUMN "HR"."LOCATIONS"."COUNTRY_ID" IS 'Country where an 
office, warehouse, or production site of a company is
located. Foreign key to country_id column of the countries table.';
COMMENT ON TABLE "HR"."LOCATIONS"  IS 'Locations table that contains 
specific address of a specific office,
warehouse, and/or production site of a company. Does not store 
addresses /
locations of customers. Contains 23 rows; references with the
departments and countries tables. ';
CREATE INDEX "HR"."LOC_CITY_IX" ON "HR"."LOCATIONS" ("CITY") 
PCTFREE 10 INITRANS 2 MAXTRANS 255 NOLOGGING COMPUTE STATISTICS 
STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT 
FLASH_CACHE DEFAULT CELL_FLASH_CACHE DEFAULT)
TABLESPACE "EXAMPLE" ;
CREATE INDEX "HR"."LOC_COUNTRY_IX" ON "HR"."LOCATIONS" ("COUNTRY_ID") 
PCTFREE 10 INITRANS 2 MAXTRANS 255 NOLOGGING COMPUTE STATISTICS 
STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT 
FLASH_CACHE DEFAULT CELL_FLASH_CACHE DEFAULT)
TABLESPACE "EXAMPLE" ;
CREATE INDEX "HR"."LOC_STATE_PROVINCE_IX" ON "HR"."LOCATIONS" 
("STATE_PROVINCE") 
PCTFREE 10 INITRANS 2 MAXTRANS 255 NOLOGGING COMPUTE STATISTICS 
STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT 
FLASH_CACHE DEFAULT CELL_FLASH_CACHE DEFAULT)
TABLESPACE "EXAMPLE" ;

当前CSS：

<html>

<body>

<div id="wrapper">

<div class="topbar">
       RED SECTION
</div>

<div class="left side-menu">
        THE BLUE SECTION
</div>

<div class="content-page">
     YELLOW SECTION
<footer>
    THE GREEN SECTION
</footer>

</div>

</div>

</body>

</html>

我现在遇到的问题

当我将高度更改为1000px时，绿色部分会隐藏
当浏览器标签的高度降低时，页面的某些部分会被隐藏并且滚动没有显示

感谢

Answer 1

您可以使用一些针对绿色，蓝色和红色部分固定位置的技巧来获得此功能，位置为顶部，左侧，右侧或底部，然后使用z-index覆盖它们。

之后，您可以将整个页面的黄色部分与填充重叠区域的填充物放在一起（如果蓝色部分从左侧开始：0，其宽度为100px，则填充左侧：100px）。红色和绿色相同。之后，在黄色内部创建一个容器，其高度为100％宽度100％，overflow-y：auto，它将适合滚动区域，并将内容放入此容器中。

别忘了用html, body {overflow:none}禁用初始滚动。如果您需要更多详细信息，当我可以访问我的PC时，可以更好地解释它：）

CSS页面滚动问题

1 个答案: