{"id":47,"date":"2026-10-19T12:01:17","date_gmt":"2026-10-19T20:01:17","guid":{"rendered":"\/?p=47"},"modified":"2026-10-19T12:01:17","modified_gmt":"2026-10-19T20:01:17","slug":"post-mveq8ynr","status":"publish","type":"post","link":"https:\/\/www.woiov.cn\/?p=47","title":{"rendered":"\u72f8\u82b1\u4e91\u79fb\u52a8\u7aef\u6253\u78e8\u8bb0\uff1a\u62bd\u5c49\u3001\u5934\u50cf\u83dc\u5355\u4e0e\u4e00\u4e2a height:100vh \u5f15\u53d1\u7684\u8fde\u73af\u5751"},"content":{"rendered":"

\u4e00\u3001\u4eca\u5929\u6539\u4e86\u4ec0\u4e48<\/h3>\n

\u4e00\u5929\u4e4b\u5185\u4ece v5.6.0 \u63a8\u5230 v5.7.2\uff0c\u4e3b\u9898\u53ea\u6709\u4e00\u4e2a\uff1a\u79fb\u52a8\u7aef\u771f\u6b63\u53ef\u7528\u4e86<\/strong>\u3002<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n\n
\u7248\u672c<\/th>\n\u6539\u52a8<\/th>\n<\/tr>\n<\/thead>\n
v5.6.0<\/td>\n\u4fa7\u680f\u6539\u62bd\u5c49\uff08\u4e0d\u518d\u94fa\u6ee1\u5168\u5c4f\uff09<\/td>\n<\/tr>\n
v5.6.1<\/td>\n\u6c49\u5821\u6309\u94ae\u4ece”\u770b\u4e0d\u89c1”\u6539\u6210\u663e\u773c\u7684\u54c1\u724c\u8272\u5706\u89d2\u5757<\/td>\n<\/tr>\n
v5.6.3<\/td>\n\u767b\u5f55\u9875\u80cc\u666f\u56fe\u4fee\u590d<\/td>\n<\/tr>\n
v5.6.5<\/td>\n\u767b\u5f55\u9875\u5e95\u90e8\u767d\u6761\u6839\u56e0\u4fee\u590d<\/td>\n<\/tr>\n
v5.6.6<\/td>\n\u9876\u90e8\u680f\u53f3\u4fa7\u52a0\u7528\u6237\u5934\u50cf\uff08\u6709\u56fe\u4e0a\u56fe\uff0c\u65e0\u56fe \ud83d\udc3e\uff09<\/td>\n<\/tr>\n
v5.7.0<\/td>\n\u70b9\u5934\u50cf\u5f39\u51fa\u7528\u6237\u83dc\u5355\uff08\u7f16\u8f91\u8d44\u6599 \/ \u9000\u51fa\u767b\u5f55\uff09<\/td>\n<\/tr>\n
v5.7.1<\/td>\n\u4fa7\u680f\u4e09\u6bb5\u5f0f\u5e03\u5c40\u7edf\u4e00\uff08\u5931\u8d25\uff09<\/td>\n<\/tr>\n
v5.7.2<\/td>\n\u62bd\u5c49\u5e95\u90e8\u6539\u7edd\u5bf9\u5b9a\u4f4d\uff08\u6210\u529f\uff09<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n

\u4e8c\u3001\u7528\u6237\u80fd\u611f\u77e5\u5230\u7684\u4e09\u4ef6\u4e8b<\/h3>\n

1. \u9876\u90e8\u680f\uff1a\u540d\u5b57\u548c\u5934\u50cf\u88c5\u8fdb\u4e00\u4e2a\u80f6\u56ca<\/h4>\n
\n\u4e4b\u524d\uff1a[\u2630] \ud83d\udc31 \u72f8\u82b1\u4e91            admin     \u2190 \u7eaf\u6587\u5b57\n\u73b0\u5728\uff1a[\u2630] \ud83d\udc31 \u72f8\u82b1\u4e91        \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n                           \u2502admin  \ud83d\udc3e\u2502  \u2190 \u53ef\u70b9\u51fb\n                           \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n<\/code><\/pre>\n
\u5934\u50cf\u6570\u636e\u6765\u81ea \/api\/profile\/me<\/code> \u7684 avatar<\/code> \u5b57\u6bb5\u2014\u2014\u5c31\u662f\u4e2a\u4eba\u4e3b\u9875\u91cc\u8bbe\u7f6e\u7684\u90a3\u5f20\u3002\u767b\u5f55\u540e\u5f02\u6b65\u52a0\u8f7d\uff0c\u4e0d\u963b\u585e\u9996\u5c4f\uff1b\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u81ea\u52a8\u56de\u843d\u5230 \ud83d\udc3e emoji\uff0c\u4e0d\u4f1a\u7a7a\u767d\u3002<\/p>\n
2. \u70b9\u80f6\u56ca\u5f39\u51fa\u7528\u6237\u83dc\u5355<\/h4>\n
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 admin            \u2502\n\u2502 \u7ba1\u7406\u5458            \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 \ud83d\udc64 \u7f16\u8f91\u4e2a\u4eba\u8d44\u6599    \u2502  \u2192 \u8df3\u8f6c\u4e2a\u4eba\u4e3b\u9875\n\u2502 \ud83d\udeaa \u9000\u51fa\u767b\u5f55        \u2502  \u2192 \u4e8c\u6b21\u786e\u8ba4\u540e\u9000\u51fa\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n
\u56db\u4e2a\u4ea4\u4e92\u7ec6\u8282\uff1a\u70b9\u80f6\u56ca\u5f00\u5173\u83dc\u5355\u3001\u70b9\u5916\u90e8\u81ea\u52a8\u6536\u8d77\u3001\u9000\u51fa\u5e26\u4e8c\u6b21\u786e\u8ba4\u9632\u8bef\u89e6\u3001\u9000\u51fa\u9879\u7ea2\u8272\u9ad8\u4eae\u3002\u684c\u9762\u7aef\u4e0d\u663e\u793a\u8fd9\u4e2a\u83dc\u5355\uff08\u4fa7\u680f\u5e95\u90e8\u6709\u540c\u6837\u7684\u5165\u53e3\uff09\uff0c\u907f\u514d\u4e24\u5957\u5165\u53e3\u6253\u67b6\u3002<\/p>\n
3. \u62bd\u5c49\u4e09\u6bb5\u5f0f\uff1a\u5e95\u90e8\u6c38\u8fdc\u53ef\u89c1<\/h4>\n
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \ud83d\udc31 \u72f8\u82b1\u4e91            \u2502  top: 0, height: 76px   \u56fa\u5b9a\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 \u25bc \u6982\u89c8              \u2502\n\u2502 \u25bc \u6211\u7684              \u2502  top: 76px, bottom: 112px\n\u2502 \u25bc \u7cfb\u7edf 7            \u2502  \u552f\u4e00\u6eda\u52a8\u533a\n\u2502   ...               \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 \ud83d\udc3e admin            \u2502  bottom: 0, height: 112px \u56fa\u5b9a\n\u2502 [\ud83c\udf19 \u6df1\u8272] [\ud83d\udeaa \u9000\u51fa]  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n
\u4e09\u3001\u4e00\u4e2a height: 100vh<\/code> \u5f15\u53d1\u7684\u8fde\u73af\u5751<\/h3>\n
\u8fd9\u6b21\u6700\u503c\u5f97\u8bb0\u5f55\u7684\u662f\u62bd\u5c49\u5e95\u90e8\u6d88\u5931\u7684\u6392\u67e5\u8fc7\u7a0b\u3002<\/p>\n
\u7b2c\u4e00\u7248\uff1aflex \u65b9\u6848\uff08\u7406\u8bba\u6b63\u786e\uff0c\u5b9e\u9645\u7ffb\u8f66\uff09<\/h4>\n
\n.sidebar {\n  position: fixed;\n  top: 0; bottom: 0;      \/* \u9760\u5b9a\u4f4d\u6491\u6ee1 *\/\n  height: 100vh;          \/* \u53c8\u5199\u6b7b\u4e86\u9ad8\u5ea6 *\/\n  display: flex; flex-direction: column;\n}\n.sidebar-nav  { flex: 1 1 auto; min-height: 0; }\n.sidebar-foot { flex-shrink: 0; }\n<\/code><\/pre>\n
\u624b\u673a\u4e0a\u5e95\u90e8\u7528\u6237\u533a\u88ab\u6324\u51fa\u5c4f\u5e55\u3002\u539f\u56e0\u6709\u4e24\u4e2a\uff1a<\/p>\n
1. height<\/code> \u8986\u76d6 bottom<\/code> \u5b9a\u4f4d<\/strong>\u3002\u540c\u65f6\u5199\u4e86 top:0; bottom:0; height:100vh<\/code>\uff0c\u6d4f\u89c8\u5668\u6309 height \u7b97\u9ad8\u5ea6\uff0cbottom \u5931\u6548\u3002<\/p>\n
2. 100vh<\/code> \u5728\u624b\u673a\u4e0a\u5305\u542b\u5730\u5740\u680f<\/strong>\u3002iOS Safari \u7684 100vh \u662f”\u5730\u5740\u680f\u6536\u8d77\u540e\u7684\u9ad8\u5ea6”\uff0c\u5730\u5740\u680f\u5c55\u5f00\u65f6\u5b9e\u9645\u53ef\u89c6\u533a\u66f4\u77ee\u2014\u2014\u62bd\u5c49\u6bd4\u5c4f\u5e55\u9ad8\uff0c\u5e95\u90e8\u81ea\u7136\u6ea2\u51fa\u3002<\/p>\n
\u7b2c\u4e8c\u7248\uff1a\u4fee\u6b63 flex\uff08\u8fd8\u662f\u7ffb\u8f66\uff09<\/h4>\n
\u53bb\u6389 height\u3001\u628a flex: 1 1 auto<\/code> \u6539\u6210 flex: 1 1 0%<\/code>\u3001flex-shrink: 0<\/code> \u6539\u6210 flex: 0 0 auto<\/code>\u3002\u7406\u8bba\u4e0a\u65e0\u61c8\u53ef\u51fb\uff0c\u4f46\u90e8\u5206\u79fb\u52a8\u6d4f\u89c8\u5668\u5bf9 min-height: 0<\/code> + flex-basis: 0%<\/code> \u7684\u5d4c\u5957\u6536\u7f29\u8ba1\u7b97\u4e0d\u4e00\u81f4\uff0c\u5e95\u90e8\u4f9d\u7136\u4e0d\u663e\u793a\u3002<\/p>\n
\u7b2c\u4e09\u7248\uff1a\u7edd\u5bf9\u5b9a\u4f4d\uff08\u6210\u529f\uff09<\/h4>\n
\u653e\u5f03 flex\uff0c\u4e09\u6bb5\u5404\u81ea\u7528 top\/bottom<\/code> \u7cbe\u786e\u5b9a\u4f4d\uff1a<\/p>\n
\n@media (max-width: 860px) {\n  .sidebar {\n    display: block;\n    position: fixed;\n    top: 0; bottom: 0;\n    height: auto;         \/* \u5173\u952e\uff1a\u6e05\u6389\u6240\u6709 height *\/\n  }\n  .sidebar > .brand {\n    position: absolute; top: 0; height: 76px;\n  }\n  .sidebar > .sidebar-nav {\n    position: absolute;\n    top: 76px; bottom: 112px;\n    overflow-y: auto;\n  }\n  .sidebar > .sidebar-foot {\n    position: absolute; bottom: 0; height: 112px;\n  }\n}\n<\/code><\/pre>\n
\u4e09\u6bb5\u4e92\u4e0d\u5e72\u6270\uff0c\u5e95\u90e8\u9ad8\u5ea6\u5199\u6b7b 112px\uff0c\u6ca1\u6709\u4efb\u4f55\u4f9d\u8d56\u6d4f\u89c8\u5668\u6536\u7f29\u8ba1\u7b97\u7684\u5730\u65b9<\/strong>\u3002\u8fd9\u5c31\u662f\u7b54\u6848\u3002<\/p>\n
\u6559\u8bad<\/h4>\n
\n\n\n\n\n\n\n\n\n
\u7ecf\u9a8c<\/th>\n\u8bf4\u660e<\/th>\n<\/tr>\n<\/thead>\n
\u5b9a\u4f4d\u6491\u6ee1\u7528 top+bottom<\/code><\/td>\n\u4e0d\u8981\u518d\u53e0\u52a0 height<\/code>\uff0c\u4f1a\u4e92\u76f8\u8986\u76d6<\/td>\n<\/tr>\n
100vh<\/code> \u5728\u79fb\u52a8\u7aef\u6709\u9677\u9631<\/td>\n\u5305\u542b\u5730\u5740\u680f\uff0c\u5b9e\u9645\u53ef\u89c6\u533a\u66f4\u77ee<\/td>\n<\/tr>\n
flex \u6536\u7f29\u8de8\u6d4f\u89c8\u5668\u4e0d\u53ef\u9760<\/td>\nmin-height:0<\/code> + basis:0<\/code> \u7684\u7ec4\u5408\u5404\u5185\u6838\u8868\u73b0\u4e0d\u4e00<\/td>\n<\/tr>\n
\u7edd\u5bf9\u5b9a\u4f4d\u662f\u6700\u7b28\u4f46\u6700\u7a33\u7684<\/td>\n\u4e0d\u4f9d\u8d56\u4efb\u4f55\u5e03\u5c40\u8ba1\u7b97\uff0c\u5199\u6b7b\u5c31\u662f\u5199\u6b7b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
\u56db\u3001\u987a\u624b\u4fee\u7684\uff1a\u767b\u5f55\u9875\u5e95\u90e8\u767d\u6761<\/h3>\n
\u767b\u5f55\u9875\u5e95\u90e8\u83ab\u540d\u51fa\u73b0\u4e00\u6761 56px \u7684\u767d\u8272\u6a2a\u6761\u3002\u6392\u67e5\u53d1\u73b0\u662f\u5168\u5c40\u6837\u5f0f body { padding-top: 56px }<\/code>\uff08\u7ed9\u56fa\u5b9a\u9876\u680f\u7559\u4f4d\u7f6e\uff09\u5728\u767b\u5f55\u9875\u6ca1\u6709\u91cd\u7f6e\u2014\u2014\u767b\u5f55\u9875\u6839\u672c\u6ca1\u6709\u9876\u680f\u3002<\/p>\n
\u4fee\u590d\u53ea\u6709\u4e00\u884c\uff1a\u767b\u5f55\u9875\u8def\u7531\u4e0b\u7ed9 body \u52a0 padding-top: 0<\/code>\u3002\u8fd9\u7c7b”\u5168\u5c40\u6837\u5f0f\u6c61\u67d3\u7279\u6b8a\u9875\u9762”\u7684\u95ee\u9898\uff0c\u4ee5\u540e\u6bcf\u4e2a\u65b0\u9875\u9762\u90fd\u8981\u68c0\u67e5\u4e00\u904d\u3002<\/p>\n
\u4e94\u3001\u6587\u7ae0\u4f53\u7cfb\u4e5f\u66f4\u65b0\u4e86<\/h3>\n
\u8d81\u7740\u6539\u7248\uff0c\u628a\u5b98\u7f51\u535a\u5ba2\u7684\u6587\u7ae0\u5168\u90e8\u91cd\u5199\u5230\u6700\u65b0\u72b6\u6001\uff1a<\/p>\n
\n\n\n\n\n\n\n\n\n
\u6587\u7ae0<\/th>\n\u72b6\u6001<\/th>\n<\/tr>\n<\/thead>\n
\u4f7f\u7528\u624b\u518c<\/td>\n\u91cd\u5199\uff1a\u52a0\u5165\u5b89\u5168\u4e2d\u5fc3\u3001\u811a\u672c\u6267\u884c\u3001\u4e2a\u4eba\u4e3b\u9875\u3001\u79fb\u52a8\u7aef\u7ae0\u8282<\/td>\n<\/tr>\n
v5 \u53d1\u5e03\u516c\u544a<\/td>\n\u91cd\u5199\uff1a\u8986\u76d6 v5.0 \u2192 v5.7.2 \u5168\u90e8 30+ \u7248\u672c<\/td>\n<\/tr>\n
\u300c\u4e16\u754c\uff0c\u60a8\u597d\u300d<\/td>\n\u5220\u9664\uff08WP \u9ed8\u8ba4\u6587\u7ae0\uff09<\/td>\n<\/tr>\n
\u6d4b\u8bd5\u8349\u7a3f \u00d73<\/td>\n\u5220\u9664<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
\u73b0\u5728\u535a\u5ba2\u5217\u8868\u5e72\u5e72\u51c0\u51c0 4 \u7bc7\uff0c\u5168\u662f\u5e72\u8d27\u3002<\/p>\n
\u516d\u3001\u4e0b\u4e00\u6b65<\/h3>\n
\u79fb\u52a8\u7aef\u7684\u4e3b\u4f53\u6846\u67b6\uff08\u62bd\u5c49\u3001\u83dc\u5355\u3001\u5e95\u90e8\u56fa\u5b9a\uff09\u5df2\u7ecf\u7a33\u5b9a\uff0c\u63a5\u4e0b\u6765\u662f\u7ec6\u8282\uff1a\u8868\u683c\u5728\u5c0f\u5c4f\u4e0a\u7684\u6a2a\u5411\u6eda\u52a8\u3001\u8be6\u60c5\u9875 6 \u4e2a Tab \u7684\u624b\u673a\u6392\u5e03\u3001\u4ee5\u53ca\u628a\u5934\u50cf\u663e\u793a\u6269\u5c55\u5230\u670d\u52a1\u5668\u5217\u8868\u7684”\u8fd9\u53f0\u5c5e\u4e8e\u8c01”\u3002<\/p>\n
\n
\u72f8\u82b1\u7f51\u7edc \u00b7 \u8ba9\u6bcf\u4e00\u53f0\u8bbe\u5907\u90fd\u6709\u8eab\u4efd \ud83d\udc3e<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e00\u3001\u4eca\u5929\u6539\u4e86\u4ec0\u4e48 \u4e00\u5929\u4e4b\u5185\u4ece v5.6.0 \u63a8\u5230 v5.7.2\uff0c\u4e3b\u9898\u53ea\u6709\u4e00\u4e2a\uff1a\u79fb\u52a8\u7aef\u771f\u6b63\u53ef\u7528\u4e86\u3002 \u7248\u672c \u6539\u52a8 v\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","hentry","category-cat-e68a80e69cafe697"],"_links":{"self":[{"href":"https:\/\/www.woiov.cn\/index.php?rest_route=\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.woiov.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.woiov.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.woiov.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.woiov.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=47"}],"version-history":[{"count":0,"href":"https:\/\/www.woiov.cn\/index.php?rest_route=\/wp\/v2\/posts\/47\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.woiov.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.woiov.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.woiov.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}