Question

我正在使用FlexBox为Web应用程序创建布局。请注意，我不是为了这个而尝试使用bootstrap。我只想在普通的flexbox css中做到这一点。

这是我想要的结构：

Row1：修复了64px高的标头。第2行：修复了侧面占据250px左侧的侧面，固定内容占据了右侧的剩余部分。

<div id="row1">
     <div class="header"></div>
</div>
<div id="row2">
     <div class="sidenav"></div>
     <div class="main-content"></div>
</div>

这里的关键是sidenav和main-content应该都是100％的屏幕，并带有自己的滚动条。实际的浏览器滚动条不应该水平或垂直显示。

Answer 1

我会在body高度column 100vh #row2，overflow-y: scroll设置.sidenav以.main-content body { height: 100vh; margin: 0; display: flex; flex-direction: column; } #row2 { display: flex; flex: 1 0 0; } .header { height: 64px; } .sidenav { flex: 0 0 250px; } .main-content { flex: 1 0 0; } .sidenav, .main-content { overflow-y: scroll; }和<div id="row1"> <div class="header">header</div> </div> <div id="row2"> <div class="sidenav">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div> <div class="main-content">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div> </div> 1}}

＆＃13;

> running install running bdist_egg running build Detected Python
> architecture: 32bit Detected platform: win32 Removing build directory
> E:\Google
> Drive\Program\Python\BossComing-dev\BossComing-dev\dlib-19.4.0\dlib-19.4.0\./tools/python/build
> Configuring cmake ...
> -- Building for: NMake Makefiles
> -- The C compiler identification is MSVC 19.10.25019.0
> -- The CXX compiler identification is MSVC 19.10.25019.0
> -- Check for working C compiler: C:/Program Files (x86)/Microsoft Visual
> Studio/2017/Community/VC/Tools/MSVC/14.10.25017/bin/HostX86/x86/cl.exe
> -- Check for working C compiler: C:/Program Files (x86)/Microsoft Visual
> Studio/2017/Community/VC/Tools/MSVC/14.10.25017/bin/HostX86/x86/cl.exe
> -- works
> -- Detecting C compiler ABI info
> -- Detecting C compiler ABI info - done
> -- Check for working CXX compiler: C:/Program Files (x86)/Microsoft Visual
> Studio/2017/Community/VC/Tools/MSVC/14.10.25017/bin/HostX86/x86/cl.exe
> -- Check for working CXX compiler: C:/Program Files (x86)/Microsoft Visual
> Studio/2017/Community/VC/Tools/MSVC/14.10.25017/bin/HostX86/x86/cl.exe
> -- works
> -- Detecting CXX compiler ABI info
> -- Detecting CXX compiler ABI info - done
> -- Detecting CXX compile features
> -- Detecting CXX compile features - done CMake Warning at E:/Program Files/Python27/Lib/site-packages/cmake/data/share/cmake-3.7/Modules/FindBoost.cmake:744
> (message):   Imported targets not available for Boost version 106300
> Call Stack (most recent call first):   E:/Program
> Files/Python27/Lib/site-packages/cmake/data/share/cmake-3.7/Modules/FindBoost.cmake:848
> (_Boost_COMPONENT_DEPENDENCIES)   E:/Program
> Files/Python27/Lib/site-packages/cmake/data/share/cmake-3.7/Modules/FindBoost.cmake:1435
> (_Boost_MISSING_DEPENDENCIES)   E:/Google
> Drive/Program/Python/BossComing-dev/BossComing-dev/dlib-19.4.0/dlib-19.4.0/dlib/cmake_utils/add_python_module:74
> (FIND_PACKAGE)   CMakeLists.txt:6 (include)
> -- Boost version: 1.63.0
> -- Found the following Boost libraries:
> --   python
> -- Found PythonLibs: E:/Program Files/Python27/libs/python27.lib (found suitable version "2.7.11", minimum required is "2.6")
> -- USING BOOST_LIBS: optimized;E:/Google Drive/Program/Python/BossComing-dev/BossComing-dev/boost_1_63_0/boost_1_63_0/stage/lib/libboost_python-vc140-mt-s-1_63.lib;debug;E:/Google
> Drive/Program/Python/BossComing-dev/BossComing-dev/boost_1_63_0/boost_1_63_0/stage/lib/libboost_python-vc140-mt-sgd-1_63.lib
> -- USING PYTHON_LIBS: E:/Program Files/Python27/libs/python27.lib
> -- C++11 activated.
> -- Looking for sys/types.h
> -- Looking for sys/types.h - found
> -- Looking for stdint.h
> -- Looking for stdint.h - found
> -- Looking for stddef.h
> -- Looking for stddef.h - found
> -- Check size of void*
> -- Check size of void* - done
> -- Enabling SSE4 instructions
> -- Searching for BLAS and LAPACK CMake Warning (dev) at E:/Program Files/Python27/Lib/site-packages/cmake/data/share/cmake-3.7/Modules/FindCUDA.cmake:490
> (if):   Policy CMP0054 is not set: Only interpret if() arguments as
> variables or   keywords when unquoted.  Run "cmake --help-policy
> CMP0054" for policy   details.  Use the cmake_policy command to set
> the policy and suppress this   warning.   Quoted variables like "MSVC"
> will no longer be dereferenced when the policy   is set to NEW.  Since
> the policy is not set the OLD behavior will be used. Call Stack (most
> recent call first):   E:/Google
> Drive/Program/Python/BossComing-dev/BossComing-dev/dlib-19.4.0/dlib-19.4.0/dlib/CMakeLists.txt:501
> (find_package) This warning is for project developers.  Use -Wno-dev
> to suppress it. CUDA_TOOLKIT_ROOT_DIR not found or specified
> -- Could NOT find CUDA (missing:  CUDA_TOOLKIT_ROOT_DIR CUDA_NVCC_EXECUTABLE CUDA_INCLUDE_DIRS CUDA_CUDART_LIBRARY) (Required
> is at least version "7.5")
> -- *** cuDNN V5.0 OR GREATER NOT FOUND.  DLIB WILL NOT USE CUDA. ***
> -- *** If you have cuDNN then set CMAKE_PREFIX_PATH to include cuDNN's folder.
> -- Configuring done
> -- Generating done
> -- Build files have been written to: E:/Google Drive/Program/Python/BossComing-dev/BossComing-dev/dlib-19.4.0/dlib-19.4.0/tools/python/build
> Build using cmake ... Scanning dependencies of target dlib [  0%]
> Building CXX object
> dlib_build/CMakeFiles/dlib.dir/base64/base64_kernel_1.cpp.obj
> base64_kernel_1.cpp [  1%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/bigint/bigint_kernel_1.cpp.obj
> bigint_kernel_1.cpp [  2%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/bigint/bigint_kernel_2.cpp.obj
> bigint_kernel_2.cpp [  2%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/bit_stream/bit_stream_kernel_1.cpp.obj
> bit_stream_kernel_1.cpp [  3%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/entropy_decoder/entropy_decoder_kernel_1.cpp.obj
> entropy_decoder_kernel_1.cpp [  4%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/entropy_decoder/entropy_decoder_kernel_2.cpp.obj
> entropy_decoder_kernel_2.cpp [  4%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/entropy_encoder/entropy_encoder_kernel_1.cpp.obj
> entropy_encoder_kernel_1.cpp [  5%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/entropy_encoder/entropy_encoder_kernel_2.cpp.obj
> entropy_encoder_kernel_2.cpp [  6%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/md5/md5_kernel_1.cpp.obj
> md5_kernel_1.cpp [  6%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/tokenizer/tokenizer_kernel_1.cpp.obj
> tokenizer_kernel_1.cpp [  7%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/unicode/unicode.cpp.obj unicode.cpp [ 
> 8%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/data_io/image_dataset_metadata.cpp.obj
> image_dataset_metadata.cpp [  8%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/data_io/mnist.cpp.obj mnist.cpp [  9%]
> Building CXX object
> dlib_build/CMakeFiles/dlib.dir/dnn/cpu_dlib.cpp.obj cpu_dlib.cpp
> E:\Google
> Drive\Program\Python\BossComing-dev\BossComing-dev\dlib-19.4.0\dlib-19.4.0\dlib\dnn\cpu_dlib.cpp(1643):
> warning C4018: '<': signed/unsigned mismatch [ 10%] Building CXX
> object dlib_build/CMakeFiles/dlib.dir/dnn/tensor_tools.cpp.obj
> tensor_tools.cpp [ 10%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/sockets/sockets_kernel_1.cpp.obj
> sockets_kernel_1.cpp [ 11%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/bsp/bsp.cpp.obj bsp.cpp [ 12%] Building
> CXX object
> dlib_build/CMakeFiles/dlib.dir/dir_nav/dir_nav_kernel_1.cpp.obj
> dir_nav_kernel_1.cpp [ 12%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/dir_nav/dir_nav_kernel_2.cpp.obj
> dir_nav_kernel_2.cpp [ 13%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/dir_nav/dir_nav_extensions.cpp.obj
> dir_nav_extensions.cpp [ 14%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/linker/linker_kernel_1.cpp.obj
> linker_kernel_1.cpp [ 14%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/logger/extra_logger_headers.cpp.obj
> extra_logger_headers.cpp [ 15%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/logger/logger_kernel_1.cpp.obj
> logger_kernel_1.cpp [ 16%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/logger/logger_config_file.cpp.obj
> logger_config_file.cpp [ 16%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/misc_api/misc_api_kernel_1.cpp.obj
> misc_api_kernel_1.cpp [ 17%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/misc_api/misc_api_kernel_2.cpp.obj
> misc_api_kernel_2.cpp [ 18%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/sockets/sockets_extensions.cpp.obj
> sockets_extensions.cpp [ 18%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/sockets/sockets_kernel_2.cpp.obj
> sockets_kernel_2.cpp [ 19%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/sockstreambuf/sockstreambuf.cpp.obj
> sockstreambuf.cpp [ 20%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/sockstreambuf/sockstreambuf_unbuffered.cpp.obj
> sockstreambuf_unbuffered.cpp [ 20%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/server/server_kernel.cpp.obj
> server_kernel.cpp [ 21%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/server/server_iostream.cpp.obj
> server_iostream.cpp [ 22%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/server/server_http.cpp.obj
> server_http.cpp [ 22%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/threads/multithreaded_object_extension.cpp.obj
> multithreaded_object_extension.cpp [ 23%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/threads/threaded_object_extension.cpp.obj
> threaded_object_extension.cpp [ 24%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/threads/threads_kernel_1.cpp.obj
> threads_kernel_1.cpp [ 25%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/threads/threads_kernel_2.cpp.obj
> threads_kernel_2.cpp [ 25%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/threads/threads_kernel_shared.cpp.obj
> threads_kernel_shared.cpp [ 26%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/threads/thread_pool_extension.cpp.obj
> thread_pool_extension.cpp [ 27%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/threads/async.cpp.obj async.cpp [ 27%]
> Building CXX object dlib_build/CMakeFiles/dlib.dir/timer/timer.cpp.obj
> timer.cpp [ 28%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/stack_trace.cpp.obj stack_trace.cpp [
> 29%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_widgets/fonts.cpp.obj fonts.cpp [
> 29%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_widgets/widgets.cpp.obj widgets.cpp
> [ 30%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_widgets/drawable.cpp.obj
> drawable.cpp [ 31%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_widgets/canvas_drawing.cpp.obj
> canvas_drawing.cpp [ 31%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_widgets/style.cpp.obj style.cpp [
> 32%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_widgets/base_widgets.cpp.obj
> base_widgets.cpp [ 33%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_core/gui_core_kernel_1.cpp.obj
> gui_core_kernel_1.cpp [ 33%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/gui_core/gui_core_kernel_2.cpp.obj
> gui_core_kernel_2.cpp [ 34%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/png.c.obj png.c [ 35%]
> Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngerror.c.obj
> pngerror.c [ 35%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngget.c.obj pngget.c [
> 36%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngmem.c.obj pngmem.c [
> 37%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngpread.c.obj
> pngpread.c [ 37%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngread.c.obj pngread.c
> [ 38%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngrio.c.obj pngrio.c [
> 39%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngrtran.c.obj
> pngrtran.c [ 39%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngrutil.c.obj
> pngrutil.c [ 40%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngset.c.obj pngset.c [
> 41%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngtrans.c.obj
> pngtrans.c [ 41%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngwio.c.obj pngwio.c [
> 42%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngwrite.c.obj
> pngwrite.c [ 43%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngwtran.c.obj
> pngwtran.c [ 43%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/libpng/pngwutil.c.obj
> pngwutil.c [ 44%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/adler32.c.obj adler32.c [
> 45%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/compress.c.obj compress.c
> [ 45%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/crc32.c.obj crc32.c [
> 46%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/deflate.c.obj deflate.c [
> 47%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/gzclose.c.obj gzclose.c [
> 47%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/gzlib.c.obj gzlib.c [
> 48%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/gzread.c.obj gzread.c [
> 49%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/gzwrite.c.obj gzwrite.c [
> 50%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/infback.c.obj infback.c [
> 50%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/inffast.c.obj inffast.c [
> 51%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/inflate.c.obj inflate.c [
> 52%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/inftrees.c.obj inftrees.c
> [ 52%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/trees.c.obj trees.c [
> 53%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/uncompr.c.obj uncompr.c [
> 54%] Building C object
> dlib_build/CMakeFiles/dlib.dir/external/zlib/zutil.c.obj zutil.c [
> 54%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/image_loader/png_loader.cpp.obj
> png_loader.cpp [ 55%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/image_saver/save_png.cpp.obj
> save_png.cpp [ 56%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcomapi.cpp.obj
> jcomapi.cpp [ 56%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdapimin.cpp.obj
> jdapimin.cpp [ 57%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdapistd.cpp.obj
> jdapistd.cpp [ 58%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdatasrc.cpp.obj
> jdatasrc.cpp [ 58%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdcoefct.cpp.obj
> jdcoefct.cpp [ 59%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdcolor.cpp.obj
> jdcolor.cpp [ 60%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jddctmgr.cpp.obj
> jddctmgr.cpp [ 60%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdhuff.cpp.obj
> jdhuff.cpp [ 61%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdinput.cpp.obj
> jdinput.cpp [ 62%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdmainct.cpp.obj
> jdmainct.cpp [ 62%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdmarker.cpp.obj
> jdmarker.cpp [ 63%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdmaster.cpp.obj
> jdmaster.cpp [ 64%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdmerge.cpp.obj
> jdmerge.cpp [ 64%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdphuff.cpp.obj
> jdphuff.cpp [ 65%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdpostct.cpp.obj
> jdpostct.cpp [ 66%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdsample.cpp.obj
> jdsample.cpp [ 66%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jerror.cpp.obj
> jerror.cpp [ 67%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jidctflt.cpp.obj
> jidctflt.cpp [ 68%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jidctfst.cpp.obj
> jidctfst.cpp [ 68%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jidctint.cpp.obj
> jidctint.cpp [ 69%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jidctred.cpp.obj
> jidctred.cpp [ 70%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jmemmgr.cpp.obj
> jmemmgr.cpp [ 70%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jmemnobs.cpp.obj
> jmemnobs.cpp [ 71%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jquant1.cpp.obj
> jquant1.cpp [ 72%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jquant2.cpp.obj
> jquant2.cpp [ 72%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jutils.cpp.obj
> jutils.cpp [ 73%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcapimin.cpp.obj
> jcapimin.cpp [ 74%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jdatadst.cpp.obj [
> 75%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcparam.cpp.obj
> jcparam.cpp [ 75%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcapistd.cpp.obj
> jcapistd.cpp [ 76%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcmarker.cpp.obj
> jcmarker.cpp [ 77%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcinit.cpp.obj
> jcinit.cpp [ 77%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcmaster.cpp.obj
> jcmaster.cpp [ 78%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcdctmgr.cpp.obj
> jcdctmgr.cpp [ 79%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jccoefct.cpp.obj
> jccoefct.cpp [ 79%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jccolor.cpp.obj
> jccolor.cpp [ 80%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jchuff.cpp.obj
> jchuff.cpp [ 81%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcmainct.cpp.obj
> jcmainct.cpp [ 81%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcphuff.cpp.obj
> jcphuff.cpp [ 82%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcprepct.cpp.obj
> jcprepct.cpp [ 83%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jcsample.cpp.obj
> jcsample.cpp [ 83%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jfdctint.cpp.obj
> jfdctint.cpp [ 84%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jfdctflt.cpp.obj
> jfdctflt.cpp [ 85%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/external/libjpeg/jfdctfst.cpp.obj
> jfdctfst.cpp [ 85%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/image_loader/jpeg_loader.cpp.obj
> jpeg_loader.cpp [ 86%] Building CXX object
> dlib_build/CMakeFiles/dlib.dir/image_saver/save_jpeg.cpp.obj
> save_jpeg.cpp [ 87%] Linking CXX static library dlib.lib [ 87%] Built
> target dlib Scanning dependencies of target dlib_ [ 87%] Building CXX
> object CMakeFiles/dlib_.dir/src/dlib.cpp.obj dlib.cpp [ 88%] Building
> CXX object CMakeFiles/dlib_.dir/src/matrix.cpp.obj matrix.cpp [ 89%]
> Building CXX object CMakeFiles/dlib_.dir/src/vector.cpp.obj vector.cpp
> [ 89%] Building CXX object
> CMakeFiles/dlib_.dir/src/svm_c_trainer.cpp.obj svm_c_trainer.cpp [
> 90%] Building CXX object
> CMakeFiles/dlib_.dir/src/svm_rank_trainer.cpp.obj svm_rank_trainer.cpp
> [ 91%] Building CXX object
> CMakeFiles/dlib_.dir/src/decision_functions.cpp.obj
> decision_functions.cpp [ 91%] Building CXX object
> CMakeFiles/dlib_.dir/src/other.cpp.obj other.cpp [ 92%] Building CXX
> object CMakeFiles/dlib_.dir/src/basic.cpp.obj basic.cpp [ 93%]
> Building CXX object CMakeFiles/dlib_.dir/src/cca.cpp.obj cca.cpp [
> 93%] Building CXX object
> CMakeFiles/dlib_.dir/src/sequence_segmenter.cpp.obj
> sequence_segmenter.cpp [ 94%] Building CXX object
> CMakeFiles/dlib_.dir/src/svm_struct.cpp.obj svm_struct.cpp [ 95%]
> Building CXX object CMakeFiles/dlib_.dir/src/image.cpp.obj image.cpp [
> 95%] Building CXX object CMakeFiles/dlib_.dir/src/rectangles.cpp.obj
> rectangles.cpp [ 96%] Building CXX object
> CMakeFiles/dlib_.dir/src/object_detection.cpp.obj object_detection.cpp
> e:\google
> drive\program\python\bosscoming-dev\bosscoming-dev\dlib-19.4.0\dlib-19.4.0\dlib\image_transforms/morphological_operations.h:
> warning C4819: The file contains a character that cannot be
> represented in the current code page (936). Save the file in Unicode
> format to prevent data loss [ 97%] Building CXX object
> CMakeFiles/dlib_.dir/src/shape_predictor.cpp.obj shape_predictor.cpp
> e:\google
> drive\program\python\bosscoming-dev\bosscoming-dev\dlib-19.4.0\dlib-19.4.0\dlib\image_transforms/morphological_operations.h:
> warning C4819: The file contains a character that cannot be
> represented in the current code page (936). Save the file in Unicode
> format to prevent data loss [ 97%] Building CXX object
> CMakeFiles/dlib_.dir/src/correlation_tracker.cpp.obj
> correlation_tracker.cpp e:\google
> drive\program\python\bosscoming-dev\bosscoming-dev\dlib-19.4.0\dlib-19.4.0\dlib\image_transforms/morphological_operations.h:
> warning C4819: The file contains a character that cannot be
> represented in the current code page (936). Save the file in Unicode
> format to prevent data loss [ 98%] Building CXX object
> CMakeFiles/dlib_.dir/src/face_recognition.cpp.obj face_recognition.cpp
> e:\google
> drive\program\python\bosscoming-dev\bosscoming-dev\dlib-19.4.0\dlib-19.4.0\dlib\image_transforms/morphological_operations.h:
> warning C4819: The file contains a character that cannot be
> represented in the current code page (936). Save the file in Unicode
> format to prevent data loss interrupted

＆＃13;

for (ClientNode client : srv.connections) {
 if (Objects.equals(client.getIpAddr(), clientAddr)) {
            srv.connections.remove(clientAddr);
        } else {
            System.out.println("Provided address is not found!");
            System.exit(0);
        }
    }

＆＃13;

Answer 2

这是使用flexbox的方法

body,
html {
  height: 100%;
  margin: 0
}

#row1 {
  display: flex;
  height: 64px;
  background: red;
  position: fixed;
  width: 100%;
}

#row2 {
  display: flex;
  top: 64px;
  position: relative;
  height: calc(100% - 64px);
  width: 100%
}

.sidenav {
  position: fixed;
  width: 250px;
  height: calc(100% - 64px);
background: green;
  overflow-y: scroll
}

.main-content {
  flex: 1;
  background: blue;
  overflow-y: scroll
}

<div id="row1">
  <div class="header"></div>
</div>
<div id="row2">
  <div class="sidenav">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text end </div>
  <div class="main-content">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text </div>
</div>

创建具有固定标题，固定侧栏导航，使用flexbox固定内容的布局

2 个答案: