Question

我正在努力解决这个问题：

-sidebar;

-a div固定在顶部（10％vh）;

-Div1以2个其他div（div2，div3）内部为中心，每个div都有一个图像。我无法使这个div1居中并占据90vh。 Div1必须在每个屏幕上完全可见而不滚动（内部图像应相应调整）。我要疯了。谢谢大家

layout scheme here

<body>
<div class="box-titolo">
<div id="titolo">TITLE</div></div>

<div class="big-box">
<div class="box-immagini">
<div class="output"><img src="http://via.placeholder.com/464x464" id="output3"></div>
<div class="output2"><img src="http://via.placeholder.com/464x464" id="output4"></div>
</div>
</div>

<form action="#" method="post" class="demoForm" id="demoForm">
<div class="logo">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<fieldset>
<div id="elementi">
<div class="incasso">
<br>OPTION:<br>
<label class="rad" style="margin-top: 10px;">
<input type="radio" name="incasso" value="10" id="normale" checked> 
<i></i> item</label>

<label class="rad">
<input type="radio" name="incasso" value="20" id="ribassato">
<i></i> item </label>

<label class="rad">
<input type="radio" name="incasso" value="30" id="retratto"> 
<i></i> item</label>
</div>

<hr>
<div class="finitura">
<br>OPTION2:
<br>
<label class="rad" style="margin-top: 10px;">
<input type="radio" name="finitura" value="30" id="alluminio" checked> 
<i></i> item</label>

<label class="rad">
<input type="radio" name="finitura" value="30" id="bianca"> 
<i></i> item </label>
<label class="rad">
<input type="radio" name="finitura" value="30" id="nera"> 
<i></i> item</label>
</div>
<hr>
<div class="plex">
<br>OPTION3: <br>
<label class="rad" style="margin-top: 10px;">
<input type="radio" name="plex" value="50" id="satinato" checked> 
<i></i> item</label>
<label class="rad">
<input type="radio" name="plex" value="10" id="trasparente"> 
<i></i> item</label>
</div>
</div>
</fieldset>
</form>
</body>

CSS：

#titolo {
    margin: 20px 0px;
    padding: 0px;
}

.logo {
    margin-top: 20px;
    text-align: center;
}

#elementi>div {
    margin: 10px 10px;
}

label {
    display: block;
}

html,
body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}


.box-titolo {
    margin-left: 200px;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    background-color: #fff;
    border-bottom: 2px solid grey;
    z-index: 99;
}

.output,
.output2 {
    width: 464px;
    height: 464px;
}

hr {
    width: 80%;
}

form {
    position: fixed;
    top: 0;
    left: 0px;
    width: 200px;
    height: 100vh;
    background: #fff;
    padding: 0 0 5px 0;
    box-sizing: border-box;
    z-index: 0;
    font-size: 12px;
    color: black;
    padding-left: 20px;
    padding-right: 20px;
}

.big-box {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-top: 50px;
}

.box-immagini {
    width: 464px;
    /* max-height: 100vh; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.output img,
.output2 img {
    width: auto;
    height: 100%;
}

Codepen

Answer 1

希望这适合您，您可以根据需要调整固定值。

编辑：使IMG适合父母的关键是将他们的身高和宽度设置为最大100％，这告诉他们不要超出父母的身高和宽度，

img{
  max-width:100%;
  max-height:100%;
}

*{margin:0;padding:0;box-sizing: border-box;color:white;}

html,body{
  height:100%;
  width:100%;
}
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main;overflow:hidden; }


.container{
  height:100%;
  display: grid;
  grid-template-areas:'menu header header header header header'
                      'menu main main main main main';
  grid-gap: 10px;
  grid-template-rows: 100px auto;
  grid-template-columns: 300px auto;
  background-color: #fdfdfd;
  padding: 10px;
}
.container>div {
  background-color: #1a454e;
  text-align: center;
}

.item3>.main{
  width:80%;
  height:100%;
  margin:0 auto;
  background :brown;
  display: grid;
  grid-template-areas: '.''.';
  grid-gap: 10px;
}
.item3>.main>div{
  width:100%;
  height:100%;
}
.item3>.main>div>img{
  max-width:100%;
  max-height:100%;
}

<div class="container">
	<div class="item1">Title</div>
	<div class="item2">
		<form action="#" method="post" class="demoForm" id="demoForm">
                    <div class="logo">
                        <img src="http://via.placeholder.com/100x100" alt="">
                    </div>
                    <fieldset>
                        <div id="elementi">
                            <div class="incasso">
                                <br>
                                OPTION:<br>
                                <label class="rad" style="margin-top: 10px;">
                                    <input type="radio" name="incasso" value="10" id="normale" checked>
                                    <i></i>
                                    item
                                </label>
                                <label class="rad">
                                    <input type="radio" name="incasso" value="20" id="ribassato">
                                    <i></i>
                                    item 
                                </label>
                                <label class="rad">
                                    <input type="radio" name="incasso" value="30" id="retratto">
                                    <i></i>
                                    item
                                </label>
                            </div>
                            <hr>
                            <div class="finitura">
                                <br>
                                OPTION2:<br>
                                <label class="rad" style="margin-top: 10px;">
                                    <input type="radio" name="finitura" value="30" id="alluminio" checked>
                                    <i></i>
                                    item
                                </label>
                                <label class="rad">
                                    <input type="radio" name="finitura" value="30" id="bianca">
                                    <i></i>
                                    item 
                                </label>
                                <label class="rad">
                                    <input type="radio" name="finitura" value="30" id="nera">
                                    <i></i>
                                    item
                                </label>
                            </div>
                            <hr>
                            <div class="plex">
                                <br>
                                OPTION3: <br>
                                <label class="rad" style="margin-top: 10px;">
                                    <input type="radio" name="plex" value="50" id="satinato" checked>
                                    <i></i>
                                    item
                                </label>
                                <label class="rad">
                                    <input type="radio" name="plex" value="10" id="trasparente">
                                    <i></i>
                                    item
                                </label>
                            </div>
                        </div>
                    </fieldset>
                </form>
	</div>
	<div class="item3">		
		<div class="main">
			<div class="mainitem1"><img src="http://via.placeholder.com/464x464" id="output3"></div>
			<div class="mainitem2"><img src="http://via.placeholder.com/464x464" id="output3"></div>
		</div>
	</div>  
</div>

居中div 100vh，里面有两个div

1 个答案: