Question

我似乎无法在任何地方找到解决方案。

我有一个页面，其中有三个元素通过flex：header，container和footer显示。页眉和页脚只包含他们需要的内容，但容器必须占用窗口中剩余的所有空间。这是通过flex属性实现的。

我想插入一个Slick Carousel，并将包含与将图像作为背景包含相同的方式（但使用img标签，用于语义）。

您可以在此处查看示例代码：

<html>
<head>
    <title>Manuel del Pozo | Interiorismo & Diseño</title>
</head>
<body>
    <div class="flex-container">
        <header>
            <div class="links">
                <div class="lang-selector">
                    <a href="#">EN</a>
                    <a href="#">/ ES</a>
                    <a href="#">/ PT</a>
                </div>
                <div class="social-links">
                    <a href="#" class="fa fa-facebook">Fb</a>
                    <a href="#" class="fa fa-twitter">Tw</a>
                    <a href="#" class="fa fa-instagram">Ig</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="logo-header">
                <h1>Manuel del  Pozo</h1>
                <h2>Interiorismo & Diseño</h2>
            </div>
            <nav>
                <a href="#">Home</a>
                <a href="#">Estudio</a>
                <a href="#">Proyectos</a>
                <a href="#">Servicios</a>
                <a href="#">About Me</a>
                <a href="#">Contacto</a>
            </nav>
        </header>
        <div class="container">
            <div class="carousel">
                <img src="http://www.manueldelpozoid.com/root/img/portfolio/01.jpg" alt="Portfolio Image 01">
            </div>
        </div>
        <footer>
            <div class="philo">
                <p>Creamos un espacio hecho a tu medida, adaptándolo a tus gustos y necesidades</p>
            </div>
            <div class="footer-contact">
                <a href="mailto:manuel@fake.com">manuel@fake.com</a>
                <p> | </p>
                <p>Tlf.: XXX XXX XXX</p>
            </div>
        </footer>
    </div><!--  end of flex-container   -->
</body>
</html>

http://codepen.io/anon/pen/MaRPop?editors=110

它没有旋转木马，只是一个图像，使这更容易。

谢谢！

Answer 1

不完全确定您需要什么，所以请尝试将以下CSS添加到您的style.css中，看看我是否接近。

<强> CSS

/*******************************************************************************
GENERAL
*******************************************************************************/
html,
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    font-family: 'Courier', serif;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*******************************************************************************
FLEX DISPLAY SETTINGS
*******************************************************************************/
.flex-container {
    display: flex;
    flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 20px;
  overflow-y: auto;  
  overflow-x: hidden;

}

.flex-container header {
  flex: 0 0  15vh;
  position: fixed;
  top: 0;
   height: 15vh;
   width: 100%;
}
.flex-container .container {
    flex: 1 0 70vh;
    width: 100%;
    height: calc(100% - 30vh);
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: calc(100% - 30vh);
}
.flex-container footer {
   flex: 0 0 15vh;
   position: fixed;
   bottom: 0;
   height: 15vh;
   width: 100%;
}

Answer 2

使用zer00ne CSS，我为页眉和页脚设置了固定高度，然后使用容器“100vh - （页眉+页脚）”的计算。然后将100％高度放置到所有元素，直到img，我放入物体适合：包含;

为我修好了

IMG标记包含在flex div

2 个答案: