相关疑难解决方法(0)

这是我的主页

我想扩展图像的高度以适应整个屏幕.我知道我必须调整height属性,我这样做,似乎没有任何工作.

CSS

.hero {
  background: #fff;
  border-bottom: 8px solid #7ac9ed;
  background: url('../img/hero-slider/boxfill2sm.jpg');
  background-size: cover;
  position: relative;
  padding-top: 0;
  height: auto;
}

注意:我试过了height: auto;.它没有做任何事情.

HTML

<section class="hero">
    <div class="container-fluid no-margin no-padding">

        <div class="col-md-8 col-sm-12 col-xs-12 col-lg-8" id="hero-left">
            <div>

                <div class="row">
                    <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 391px;"><div class="hero-slider" style="width: auto; position: relative;">
                        <div class="slide first-slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 50; display: block;"> …

我试图views-cntnr占用任何未使用的空间views-cntnr和menubardiv.为此,我将flex显示设置为列方向.然后我将flex-grow属性设置views-cntnr为1.似乎没有做任何事情.的jsfiddle

注意:不确定这是否重要,但我有一些嵌套的flex显示.

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<section class="analysis">
  <div class="menubar">
    <div class="view-ctrls text-center">
      <div class="btn-group" role="group">
        <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
        <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
        <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
        <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button>
      </div>
    </div>
  </div>
  <div id="views-cntnr">
    <div class="r1">
      <div id="v1" class="view">V1</div>
      <div id="v2" class="view">V2</div>
      <div id="v3" class="view">V3</div>
    </div>
    <div class="r2">
      <div id="v4" class="view">V4</div> …

父级只有display: flex和flex-wrap: wrap，而子级有固定的height和。其行为如下：width150px

父容器的高度垂直扩展以方便包裹子元素。

但是，将父级更改为 hasflex-direction: column不会在水平方向上产生相同的行为：

父元素不是扩展以适应包装内容，而是重新排列子元素以方便在父元素中使用。

我希望通过垂直环绕内容实现的行为如下所示：

嗯，差不多就是这样。想象一下父级垂直填充空间，并水平扩展以包裹内容。第一个 gif 的水平版本。

这可以通过弹性盒实现吗？

我无法让 CSS 网格在高度和宽度上拉伸到其父级尺寸。当设置为 100% 时，宽度会很好地拉伸，但高度会保持其初始大小？我不确定高度尺寸是在哪里计算的。

当将所有行的 grid-template-rows 设置为 25% 时，我认为这会给我所需的 100% 高度，但它不起作用。

JSFiddle

body {
  margin: 10px;
  background-color: red;
  height: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: 
    "a b c d" 
    "e f f g" 
    "h f f i" 
    "j k l m";
  height: 100%;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-area: a;
} …

Helllo伙计们!我想让我的左侧菜单高度为100%.

右侧将有一个内容区域,右侧也会有一个页脚.

我希望左边的浅蓝色菜单到达页面的底部0.

检查这个JSFiddle http://jsfiddle.net/mYw72/

或者这个代码!

        <div id="container">
        <div id="top">
            <div id="logo"></div>
            <div id="user-tools">
                <a href="#">Help</a>
                <span>&nbsp;|&nbsp;</span>
                <a href="#">Contact us</a>
            </div>
        </div>

        <div id="sidebar">
            <ul>
                <li><a href="#">Company</a></li>
                <li><a href="">Administrator</a></li>
                <li><a href="#">App</a></li>
                <li><a href="#">Configuration</a></li>
                <li><a href="#">Statistics</a></li>
                <li><a href="#">Monitor</a></li>
                <li><a href="#">Preference</a></li>
            </ul>
        </div>
        <div id="rightSide">
            <div id="content">
                Content.
            </div>

            <div id="bottom1">
                <div id="line-bottom"></div>
                <div id="text-bottom">Copyright 2012 <span>ME</span>, Inc. All Rights Reserved</div> 
            </div>
        </div>
    </div>

css是这样的

html { 
padding:0px;
margin:0px;
}

body {
background-color: #ECEDEF;
font-family: Verdana, Tahoma, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
} …

我的网站有两列,现在背景颜色在左栏的最后一段内容(用于导航)结束.

我试过身高:100%,最小身高:100%; 似乎没有用.这是css.

.container {
    width: 100%;
    height:100%;
    min-width: 960px;
    background: #fbf6f0;
    margin: 0 auto; 
    overflow: hidden;
}

#sidebar1 {
    float: left;
    position:absolute;
    width: 20%;
    height:100%;
    min-width:220px;
    background: none repeat scroll 0% 0% #007cb8;
    z-index:9999;
}

我有这个结构:

<body>

    <div id="header">..</div>

    <div id="content">..</div>

    <div id="footer">..</div>

</body>

这个CSS:

身体{颜色:白色; font-family:'Play',sans-serif; 最大宽度:2560px; 保证金:0自动; 最小宽度:960px; 高度:100%; 填充:0; }

#header {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    min-width: 960px;
    height: 95px;
    background-image: url("../images/header-bg.png");
}

#content {
    margin: 0 auto;
    position: relative;
    max-width: 1600px;
    height:100%;
    overflow:hidden;
}

#footer {
  background-color: #009EDB;
  background-image: url("../images/footer-bg.png");
  bottom: 0;
  height: 30px;
  margin: 0;
  position: relative;
  width: 100%;

}?

但不是body高度100%的浏览器窗口.我的问题是什么？谢谢.

的jsfiddle

CSS：

.header{
    position: absolute;
    top: 50%;
    left: calc(50% - 200px);
    opacity: 0.9;
    color: #ffffff;
    font-size: 35px;
    text-shadow: 2px 2px 5px #000000;
}

HTML：

<body>
<div class="background"></div>
<div style="position: relative">
    <div class="header"><label>A+ CMS</label></div>
</div>
</body>

输出：

该left属性已正常工作，但top属性没有。我将 50% 设置为top但“A+ CMS”这个词一直挂在屏幕顶部。
如果我将 的值top从百分比更改为px，它会起作用。为什么？

I can get the div to move to the correct column but not the correct row.

This will display the blue rectangle in the correct column, but for whatever reason it isn't moving in to the row I need it to. Thank you all for your help.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

我很困惑为什么 flex div 占据其父元素的 100% 宽度。采取以下片段：

#wrapper {
  width: 100%;
  height: 100px;
  background: green;
}

#flex {
  color: white;
  display: flex;
  flex-direction: row;
  background: blue;
}

<div id="wrapper">
   <div id="flex">
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
     <div>Item</div>
   </div>
</div>

为什么 flex div 会扩展到父级的 100% 宽度？有没有办法使 Flex div 的宽度仅与其中内容的宽度相同？

任何帮助表示赞赏，谢谢