问:
My content is exceeding the background color in the section
I have 3 section in the site and each section I am displaying the 100% height so that section will display full screen.

In the first and the second section I have some limited content but in the third section, I have more than 500 lines.

In the first and second section is working because of less content.
My issue is in the third section. You can check my content is exceeding the background color that.

I need whole background color to my content.

 html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><section class="one_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
<section class="two_bg">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<section class="three_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section></code>```

答:
Use height: auto; for it to auto adjust the hight to its content.

Adding min-height: 100%; will make it so each section has a height of 100%. When there is more content it will automatically expand the section to the same height as the text.

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><section class="one_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
<section class="two_bg">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<section class="three_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section></code>```

Body:
I have 3 section in the site and each section I am displaying the 100% height so that section will display full screen.

In the first and the second section I have some limited content but in the third section, I have more than 500 lines.

In the first and second section is working because of less content.
My issue is in the third section. You can check my content is exceeding the background color that.

I need whole background color to my content.

 html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Body:
Use height: auto; for it to auto adjust the hight to its content.

Adding min-height: 100%; will make it so each section has a height of 100%. When there is more content it will automatically expand the section to the same height as the text.

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }

<section class="one_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
<section class="two_bg">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<section class="three_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>


来源: stackexchange

问:
Select second submit button in JS
I want to use TestCafe to click on a submit button in a form. Here is what the button looks like:

```<code><button type="submit" class="btn btn-lg btn-cart pull-left">
<span class="hidden-xs hidden-sm">
     <i class="fa fa-shopping-basket"></i>
</span>
     Add To Cart
</button>
</code>```

This button is inside a form:

```<code><form name="product1" action="domain.tld/product" method="post" role="form">
</form>
</code>```

In my test I want to add the product to the cart:

```<code>test('add it', async t =>{
     await t
          .click(Selector('button[type="submit"]'))
});
</code>```

The problem is, that in the nabber is another button with the type submit. How can I use this specific button to add my product to the cart?

答:
Submit the second form :

```<code>$('form').eq(1).submit();
</code>```

You don't need to find the submit button and trigger a click on that. Instead, you can just call .submit() on the form itself.

ContentLicense: CC BY-SA 3.0

Title: Select second submit button in JS

Body:
I want to use TestCafe to click on a submit button in a form. Here is what the button looks like:

<button type="submit" class="btn btn-lg btn-cart pull-left">

     Add To Cart
</button>

This button is inside a form:

<form name="product1" action="domain.tld/product" method="post" role="form">
</form>

In my test I want to add the product to the cart:

test('add it', async t =>{
     await t
          .click(Selector('button[type="submit"]'))
});

The problem is, that in the nabber is another button with the type submit. How can I use this specific button to add my product to the cart?

Body:
Submit the second form :

$('form').eq(1).submit();

You don't need to find the submit button and trigger a click on that. Instead, you can just call .submit() on the form itself.


问:
How to show a specific unit of data from a record queried in rails?
I am really stuck with dealing with querys from multiple tables in rails. If this is my controller:

```<code> def show
    @user = User.find(params[:id])
    @entry = Entry.joins(:event, :user).where(users: { id: '2' })
    @event = Event.find(1)
  end
</code>```

and this is my models

```<code>class Entry < ApplicationRecord
  belongs_to :user
  belongs_to :event

class User < ApplicationRecord
   has_many :entries, dependent: :destroy

class Event < ApplicationRecord
    has_many :entries, dependent: :destroy
</code>```

The query runs happily in rails console and returns the records but I don't know how to access specific units like entry.course in my embeded ruby.

Update

To clarify On a page I woulk like to output somthing for all the entries assosiated with the user logged in to the page.

eventName eventLocation eventDate course siCard

The schema:

```<code>ActiveRecord::Schema.define(version: 20171204183458) do

    # These are extensions that must be enabled in order to support this
  database
  enable_extension "plpgsql"

create_table "entries", force: :cascade do |t|
  t.string "course"
  t.string "siCard"
  t.bigint "user_id"
  t.bigint "event_id"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.index ["event_id"], name: "index_entries_on_event_id"
  t.index ["user_id", "created_at"], name:
  "index_entries_on_user_id_and_created_at"
  t.index ["user_id"], name: "index_entries_on_user_id"
 end

create_table "events", force: :cascade do |t|
 t.string "eventName"
 t.string "location"
 t.date "eventDate"
 t.text "description"
 t.datetime "created_at", null: false
 t.datetime "updated_at", null: false
 t.string "eventLink"
 t.string "eventCoordinates"
 t.index ["eventName"], name: "index_events_on_eventName", unique: true
end

create_table "users", force: :cascade do |t|
  t.string "name"
  t.string "email"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.string "password_digest"
  t.string "firstName"
  t.string "remember_digest"
  t.boolean "admin"
  t.index ["email"], name: "index_users_on_email", unique: true
end

add_foreign_key "entries", "events"
add_foreign_key "entries", "users"
end
</code>```

答:
You could confine with one query using
eager_load

```<code>def show
    @user = User.eager_load(:entries => [:event]).where(users: {id: params[:id]})
end
</code>```

According to your models you can access entries though user.

```<code>@user.entries

@user.entries.map{|entry| entry.course}
</code>```

Also you can access event (which belongs to entry) though entry.

```<code>@user.entries[1].event

@user.entries.map{|entry| entry.event}
</code>```

Body:
I am really stuck with dealing with querys from multiple tables in rails. If this is my controller:

 def show
    @user = User.find(params[:id])
    @entry = Entry.joins(:event, :user).where(users: { id: '2' })
    @event = Event.find(1)
  end

and this is my models

class Entry < ApplicationRecord
  belongs_to :user
  belongs_to :event

class User < ApplicationRecord
   has_many :entries, dependent: :destroy

class Event < ApplicationRecord
    has_many :entries, dependent: :destroy

The query runs happily in rails console and returns the records but I don't know how to access specific units like entry.course in my embeded ruby.

Update

To clarify On a page I woulk like to output somthing for all the entries assosiated with the user logged in to the page.

eventName eventLocation eventDate course siCard

The schema:

ActiveRecord::Schema.define(version: 20171204183458) do

    # These are extensions that must be enabled in order to support this
  database
  enable_extension "plpgsql"

create_table "entries", force: :cascade do |t|
  t.string "course"
  t.string "siCard"
  t.bigint "user_id"
  t.bigint "event_id"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.index ["event_id"], name: "index_entries_on_event_id"
  t.index ["user_id", "created_at"], name:
  "index_entries_on_user_id_and_created_at"
  t.index ["user_id"], name: "index_entries_on_user_id"
 end

create_table "events", force: :cascade do |t|
 t.string "eventName"
 t.string "location"
 t.date "eventDate"
 t.text "description"
 t.datetime "created_at", null: false
 t.datetime "updated_at", null: false
 t.string "eventLink"
 t.string "eventCoordinates"
 t.index ["eventName"], name: "index_events_on_eventName", unique: true
end

create_table "users", force: :cascade do |t|
  t.string "name"
  t.string "email"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.string "password_digest"
  t.string "firstName"
  t.string "remember_digest"
  t.boolean "admin"
  t.index ["email"], name: "index_users_on_email", unique: true
end

add_foreign_key "entries", "events"
add_foreign_key "entries", "users"
end

Body:
You could confine with one query using
eager_load

def show
    @user = User.eager_load(:entries => [:event]).where(users: {id: params[:id]})
end

According to your models you can access entries though user.

@user.entries

@user.entries.map{|entry| entry.course}

Also you can access event (which belongs to entry) though entry.

@user.entries[1].event

@user.entries.map{|entry| entry.event}


问:
Place an image/icon in the upper right corner of a div
I would like to place an image in the upper right corner of a div that always stays in that place and always moves (at different viewport sizes).

Here is the current status of my less code and the associated HTML:

LESS:

```<code>.selling,
.price,
.cta {
    float: left;
    width: 33.33%; min-height: @height;
    padding: 0 1%;
    .font-size(18px);

    & > div,
    & > a {
        // min-height: @height;
        height: @height;
        padding: 14px 22px;
        background-color: @black;
        color: #fff;
    }

    &.rabattaktion {
        div::after {
            position: absolute; z-index: 1;
            width: 68px; height: 65px;
            background: transparent url('../img/santa_hat.png') center top no-repeat;
            content: "";
            margin-top: -170px;
            margin-left: 351px;
            }
            div:hover:before { z-index: 4; }
        }
}
</code>```

HTML:

```<code><div class="offer">
   ...
    <div class="price sh <?php if($entry->field('rabattaktion')->value()): ?> rabattaktion<?php endif ?>">
        <div>
            <h3>Gesamtpreis:</h3>
            <p><span><?php echo $new_price_formatted; ?> € *</span></p>
            <?php if(isset($rate)): ?>
               <p>
                    <b>Ratenzahlung:</b>
            <?php echo $raten; ?> Monatsraten á <?php echo $rate_formatted; ?> € *
                </p>
            <?php endif; ?>
        </div>
    </div>
    ...
</div>
</code>```

In this way I get the picture in the upper right corner. But as soon as the viewport size changes, the position is no longer correct.

What am I doing wrong?

答: Set position to relative on the parent div to start with. that would maybe fix your issue..</p>

Body:
I would like to place an image in the upper right corner of a div that always stays in that place and always moves (at different viewport sizes).

Here is the current status of my less code and the associated HTML:

LESS:

.selling,
.price,
.cta {
    float: left;
    width: 33.33%; min-height: @height;
    padding: 0 1%;
    .font-size(18px);

    & > div,
    & > a {
        // min-height: @height;
        height: @height;
        padding: 14px 22px;
        background-color: @black;
        color: #fff;
    }

    &.rabattaktion {
        div::after {
            position: absolute; z-index: 1;
            width: 68px; height: 65px;
            background: transparent url('../img/santa_hat.png') center top no-repeat;
            content: "";
            margin-top: -170px;
            margin-left: 351px;
            }
            div:hover:before { z-index: 4; }
        }
}

HTML:

   ...
    <div class="price sh <?php if($entry->field('rabattaktion')->value()): ?> rabattaktion<?php endif ?>">

Gesamtpreis:

<?php echo $new_price_formatted; ?> € *

            <?php if(isset($rate)): ?>

                    Ratenzahlung:
            <?php echo $raten; ?> Monatsraten á <?php echo $rate_formatted; ?> € *

            <?php endif; ?>

    ...

In this way I get the picture in the upper right corner. But as soon as the viewport size changes, the position is no longer correct.

What am I doing wrong?


问:
how can I create executable file for the program written on Java?
everyone, how can I create executable file for the program written on Java in Eclipse Helios? I mean to create small icon to be able start program only by double-clicking on its icon, thanks in advance
edited
I mean executable for Windows

答:
You didn't mention what platform you are using. There are 2 ways I can think of.

The easiest way is for you to create a *.bat file (in Windows) that contains the java YourApp command line.

If you want to create a more fancy installer and executable, you can use NSIS script to do so. Since you are using eclipse, consider trying EclipseNSIS to generate the NSIS script, which is much faster and easier than writing it yourself from ground up.

ContentLicense: CC BY-SA 2.5


问:
rangeSpecification --> Trouble to call in a script
I'm trying to build a script to count how many cells with some backgroundcolor i have in a line.
This is what i have:

```<code>function PegarCorFundo(rangeSpecification) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  return sheet.getRange(rangeSpecification).getBackgroundColor();
}

function ContarCorFundo(color, rangeSpecification) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var range = sheet.getRange(rangeSpecification);
  var x = 0;
  for (var i = 1; i <= range.getNumRows(); i++) {
    for (var j = 1; j <= range.getNumColumns(); j++) {
      var cell = range.getCell(i, j);
      if(cell.getBackgroundColor() == color)
        x++;
    }
  }
  return x;
}
</code>```

The problem is when i call de function in Google Sheets. When i call
=ContarCorFundo("#ffff99";A1:A22), a error message appears.

When i call =ContarCorFundo("#ffff99";"A1:A22"), is ok!

Segue o link da Planilha em uso: https://docs.google.com/a/crescercampinas.com.br/spreadsheets/d/1jkoIEwNCRU7uX7dTZK9ZLCR_zOO3q4fI_ulzhKSs_yA/edit?usp=sharing

How can i call the funcion Without quotation marks or a a better way to count the cells with backgroud color?

答: If you don't use quotation marks, you are not passing the range but the values of that range to the function. The .getBackground() method requires a range-object. So you'll have to make sure a range is passed to the function. Note that there is also an add-on called Custom Count and Sum that has this functionality built in.</p>

Body:
I'm trying to build a script to count how many cells with some backgroundcolor i have in a line.
This is what i have:

function PegarCorFundo(rangeSpecification) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  return sheet.getRange(rangeSpecification).getBackgroundColor();
}

function ContarCorFundo(color, rangeSpecification) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var range = sheet.getRange(rangeSpecification);
  var x = 0;
  for (var i = 1; i <= range.getNumRows(); i++) {
    for (var j = 1; j <= range.getNumColumns(); j++) {
      var cell = range.getCell(i, j);
      if(cell.getBackgroundColor() == color)
        x++;
    }
  }
  return x;
}

The problem is when i call de function in Google Sheets. When i call
=ContarCorFundo("#ffff99";A1:A22), a error message appears.

When i call =ContarCorFundo("#ffff99";"A1:A22"), is ok!

Segue o link da Planilha em uso: https://docs.google.com/a/crescercampinas.com.br/spreadsheets/d/1jkoIEwNCRU7uX7dTZK9ZLCR_zOO3q4fI_ulzhKSs_yA/edit?usp=sharing

How can i call the funcion Without quotation marks or a a better way to count the cells with backgroud color?


问:
How do I save slideShow of photos to camera role?

How do I save slideshow created in camera roll?

```<code>(NSString *))handler;
{
    AVMutableComposition* mixComposition = [AVMutableComposition composition];

    AVURLAsset* videoAsset = [AVURLAsset URLAssetWithURL:[NSURL fileURLWithPath:videoPath] options:nil];

    NSError * error = nil;

    for (int i=0;i<[arrayOfSounds count];i++)
    {

        NSString *pathString = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"%@", [arrayOfSounds objectAtIndex:i]] ofType:@"mp3"];
        NSLog(@"pathString = %@",pathString);
        AVURLAsset * urlAsset = [AVURLAsset URLAssetWithURL:[NSURL fileURLWithPath:pathString] options:nil];

        AVAssetTrack * audioAssetTrack = [[urlAsset tracksWithMediaType:AVMediaTypeAudio] objectAtIndex:0];
        AVMutableCompositionTrack *compositionAudioTrack = [mixComposition addMutableTrackWithMediaType:AVMediaTypeAudio
                                                                                preferredTrackID: kCMPersistentTrackID_Invalid];
        CMTime audioDuration = videoAsset.duration;
        audioDurationSeconds = CMTimeGetSeconds(audioDuration);
        int startDur= [[arrayOfTime objectAtIndex:i] intValue];
        NSLog(@"startDur = %d",startDur);
        CMTime audioStartTime = CMTimeMake(i,1);
        CMTime presentTime    = CMTimeMake(1, 1);
        CMTime EndTime        = CMTimeMake(audioDurationSeconds, 1);
        CMTime audioEndTime   = CMTimeAdd(presentTime, EndTime);

     [compositionAudioTrack insertTimeRange:CMTimeRangeMake(presentTime,audioEndTime) ofTrack:audioAssetTrack atTime:audioStartTime error:&error];
    }

    NSString* movPath = [NSString stringWithFormat:@"%@/%@",documentsDirectory,@"Export.mov"];

    //AVURLAsset* videoAsset = [AVURLAsset URLAssetWithURL:[NSURL fileURLWithPath:movPath] options:nil];

    AVMutableCompositionTrack *compositionVideoTrack = [mixComposition addMutableTrackWithMediaType:AVMediaTypeVideo preferredTrackID:kCMPersistentTrackID_Invalid];

    NSError* vidError;
    [compositionVideoTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, videoAsset.duration) ofTrack:([videoAsset tracksWithMediaType:AVMediaTypeVideo].count >0)? [[videoAsset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0]:nil atTime:kCMTimeZero error:&vidError];
    NSLog(@"Vid error = %@",vidError);

    AVAssetExportSession* _assetExport = [[AVAssetExportSession alloc] initWithAsset:mixComposition presetName:AVAssetExportPresetPassthrough];

    NSString* videoName = @"exportFinal.mov";

    NSString *exportPath = [NSString stringWithFormat:@"%@/%@",documentsDirectory,videoName];
    NSLog(@"exportPath = %@",exportPath);

    NSURL *exportUrl = [NSURL fileURLWithPath:exportPath];

    if ([[NSFileManager defaultManager] fileExistsAtPath:exportPath])
    {
        [[NSFileManager defaultManager] removeItemAtPath:exportPath error:nil];
    }

    _assetExport.outputFileType = @"com.apple.quicktime-movie";
    NSLog(@"file type %@",_assetExport.outputFileType);
    _assetExport.outputURL = exportUrl;
    _assetExport.shouldOptimizeForNetworkUse = YES;

    [_assetExport exportAsynchronouslyWithCompletionHandler:
     ^(void ) {
         switch (_assetExport.status)
         {
             case AVAssetExportSessionStatusCompleted:
                 //export complete
                 NSLog(@"Export Complete");
                 //[self uploadToYouTube];
                 [self cleanUpProcess];
                 break;
             case AVAssetExportSessionStatusFailed:
                 NSLog(@"Export Failed");
                 NSLog(@"ExportSessionError: %@", [_assetExport.error localizedDescription]);
                 //export error (see exportSession.error)
                 break;
             case AVAssetExportSessionStatusCancelled:
                 NSLog(@"Export Failed");
                 NSLog(@"ExportSessionError: %@", [_assetExport.error localizedDescription]);
                 //export cancelled
                 break;
         }
     }];
}

- (void)cleanUpProcess{
    NSError* error;
    NSArray *files = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:documentsDirectory error:&error];

    for(NSString* myFiles in files){

        if([[myFiles pathExtension] isEqualToString:@"mov"]){
            continue;
        }
        NSString* filePath = [NSString stringWithFormat:@"%@/%@",documentsDirectory,myFiles];
        if(![[NSFileManager defaultManager] removeItemAtPath:filePath error:&error]){
            NSLog(@"Error Deleting");
        }

    }
}
</code>```

It is saved in this path:

"Users/devendrasingh/Library/Developer/CoreSimulator/Devices/394AD1C9-E950-422E-BDA1-083CDCEE83F6/data/Containers/Data/Application/98BEC162-C686-4BC1-B698-567B45D65F27/Documents/exportFinal.mov
  "

It's not saving in camera roll

答:
Try this:</p>

```<code>[[[ALAssetsLibrary alloc] init] writeVideoAtPathToSavedPhotosAlbum:outputFileURL completionBlock:^(NSURL *assetURL, NSError *error) {
        if (error)
            NSLog(@"%@", error);

        [[NSFileManager defaultManager] removeItemAtURL:outputFileURL error:nil];

    }];
</code>```

Body:
How do I save slideshow created in camera roll?

(NSString *))handler;
{
    AVMutableComposition* mixComposition = [AVMutableComposition composition];

    AVURLAsset* videoAsset = [AVURLAsset URLAssetWithURL:[NSURL fileURLWithPath:videoPath] options:nil];

    NSError * error = nil;

    for (int i=0;i<[arrayOfSounds count];i++)
    {

        NSString *pathString = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"%@", [arrayOfSounds objectAtIndex:i]] ofType:@"mp3"];
        NSLog(@"pathString = %@",pathString);
        AVURLAsset * urlAsset = [AVURLAsset URLAssetWithURL:[NSURL fileURLWithPath:pathString] options:nil];

        AVAssetTrack * audioAssetTrack = [[urlAsset tracksWithMediaType:AVMediaTypeAudio] objectAtIndex:0];
        AVMutableCompositionTrack *compositionAudioTrack = [mixComposition addMutableTrackWithMediaType:AVMediaTypeAudio
                                                                                preferredTrackID: kCMPersistentTrackID_Invalid];
        CMTime audioDuration = videoAsset.duration;
        audioDurationSeconds = CMTimeGetSeconds(audioDuration);
        int startDur= [[arrayOfTime objectAtIndex:i] intValue];
        NSLog(@"startDur = %d",startDur);
        CMTime audioStartTime = CMTimeMake(i,1);
        CMTime presentTime    = CMTimeMake(1, 1);
        CMTime EndTime        = CMTimeMake(audioDurationSeconds, 1);
        CMTime audioEndTime   = CMTimeAdd(presentTime, EndTime);

     [compositionAudioTrack insertTimeRange:CMTimeRangeMake(presentTime,audioEndTime) ofTrack:audioAssetTrack atTime:audioStartTime error:&error];
    }

    NSString* movPath = [NSString stringWithFormat:@"%@/%@",documentsDirectory,@"Export.mov"];

    //AVURLAsset* videoAsset = [AVURLAsset URLAssetWithURL:[NSURL fileURLWithPath:movPath] options:nil];

    AVMutableCompositionTrack *compositionVideoTrack = [mixComposition addMutableTrackWithMediaType:AVMediaTypeVideo preferredTrackID:kCMPersistentTrackID_Invalid];

    NSError* vidError;
    [compositionVideoTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, videoAsset.duration) ofTrack:([videoAsset tracksWithMediaType:AVMediaTypeVideo].count >0)? [[videoAsset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0]:nil atTime:kCMTimeZero error:&vidError];
    NSLog(@"Vid error = %@",vidError);

    AVAssetExportSession* _assetExport = [[AVAssetExportSession alloc] initWithAsset:mixComposition presetName:AVAssetExportPresetPassthrough];

    NSString* videoName = @"exportFinal.mov";

    NSString *exportPath = [NSString stringWithFormat:@"%@/%@",documentsDirectory,videoName];
    NSLog(@"exportPath = %@",exportPath);

    NSURL *exportUrl = [NSURL fileURLWithPath:exportPath];

    if ([[NSFileManager defaultManager] fileExistsAtPath:exportPath])
    {
        [[NSFileManager defaultManager] removeItemAtPath:exportPath error:nil];
    }

    _assetExport.outputFileType = @"com.apple.quicktime-movie";
    NSLog(@"file type %@",_assetExport.outputFileType);
    _assetExport.outputURL = exportUrl;
    _assetExport.shouldOptimizeForNetworkUse = YES;

    [_assetExport exportAsynchronouslyWithCompletionHandler:
     ^(void ) {
         switch (_assetExport.status)
         {
             case AVAssetExportSessionStatusCompleted:
                 //export complete
                 NSLog(@"Export Complete");
                 //[self uploadToYouTube];
                 [self cleanUpProcess];
                 break;
             case AVAssetExportSessionStatusFailed:
                 NSLog(@"Export Failed");
                 NSLog(@"ExportSessionError: %@", [_assetExport.error localizedDescription]);
                 //export error (see exportSession.error)
                 break;
             case AVAssetExportSessionStatusCancelled:
                 NSLog(@"Export Failed");
                 NSLog(@"ExportSessionError: %@", [_assetExport.error localizedDescription]);
                 //export cancelled
                 break;
         }
     }];
}

- (void)cleanUpProcess{
    NSError* error;
    NSArray *files = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:documentsDirectory error:&error];

    for(NSString* myFiles in files){

        if([[myFiles pathExtension] isEqualToString:@"mov"]){
            continue;
        }
        NSString* filePath = [NSString stringWithFormat:@"%@/%@",documentsDirectory,myFiles];
        if(![[NSFileManager defaultManager] removeItemAtPath:filePath error:&error]){
            NSLog(@"Error Deleting");
        }

    }
}

It is saved in this path:

"Users/devendrasingh/Library/Developer/CoreSimulator/Devices/394AD1C9-E950-422E-BDA1-083CDCEE83F6/data/Containers/Data/Application/98BEC162-C686-4BC1-B698-567B45D65F27/Documents/exportFinal.mov
  "

It's not saving in camera roll

Body:
Try this:

[[[ALAssetsLibrary alloc] init] writeVideoAtPathToSavedPhotosAlbum:outputFileURL completionBlock:^(NSURL *assetURL, NSError *error) {
        if (error)
            NSLog(@"%@", error);

        [[NSFileManager defaultManager] removeItemAtURL:outputFileURL error:nil];

    }];


问:
asp.net mvc: Can we set http status code when route does not match
suppose this is my route which expect integer data for productid

```<code>routes.MapRoute(
    "Product",
    "Product/{productId}",
    new {controller="Product", action="Details"},
    new {productId = @"\d+" }
 );
</code>```

so these route will work

```<code>/Product/3
/Product/8999
</code>```

how could i redirect user to a preexisting view where i can show a friendly error message for this scenario?

one more things i like to know can we set status code when user will type /Product/apple and this route will not match any. so in this case i like to set statusCode="404". if i can do it then below customErrors where i specified a view will be shown for 404 error. suggest me how to do it?

```<code><customErrors mode="Off" defaultRedirect="~/error.html">
  <error statusCode="403" redirect="~/access-denied.aspx" />
  <error statusCode="404" redirect="~/page-not-found.aspx" />
  <error statusCode="500" redirect="~/error.html" />
</customErrors>
</code>```

please guide me if it is possible.

答:
Your current listed route is not matching with the request you said.

You should consider adding two routes like this.

```<code>   routes.MapRoute(
                "Product",
                "Product/{productId}",
                new { controller = "Product", action = "Details" },
                new { productId = @"\d+" }
            );
            routes.MapRoute(
                "ProductNotMatched",
                "Product/{productId}",
                new { controller = "Product", action = "NotFound" });
</code>```

This will now call NotFound action when /Product/apple will get hit.

Next you can create an action and redirect it like this,

```<code>public ActionResult NotFound()
        {
            return HttpNotFound();
**// HERE you can redirect to specific html / razor view or static page as you wish**
        }
</code>```

Hope that helps

Body:
suppose this is my route which expect integer data for productid

routes.MapRoute(
    "Product",
    "Product/{productId}",
    new {controller="Product", action="Details"},
    new {productId = @"\d+" }
 );

so these route will work

/Product/3
/Product/8999

how could i redirect user to a preexisting view where i can show a friendly error message for this scenario?

one more things i like to know can we set status code when user will type /Product/apple and this route will not match any. so in this case i like to set statusCode="404". if i can do it then below customErrors where i specified a view will be shown for 404 error. suggest me how to do it?

<customErrors mode="Off" defaultRedirect="~/error.html">
  <error statusCode="403" redirect="~/access-denied.aspx" />
  <error statusCode="404" redirect="~/page-not-found.aspx" />
  <error statusCode="500" redirect="~/error.html" />
</customErrors>

please guide me if it is possible.

Body:
Your current listed route is not matching with the request you said.

You should consider adding two routes like this.

   routes.MapRoute(
                "Product",
                "Product/{productId}",
                new { controller = "Product", action = "Details" },
                new { productId = @"\d+" }
            );
            routes.MapRoute(
                "ProductNotMatched",
                "Product/{productId}",
                new { controller = "Product", action = "NotFound" });

This will now call NotFound action when /Product/apple will get hit.

Next you can create an action and redirect it like this,

public ActionResult NotFound()
        {
            return HttpNotFound();
**// HERE you can redirect to specific html / razor view or static page as you wish**
        }

Hope that helps


问:
SQL Query calculating the average of an average
I read through several posts on similar issues to this, and cannot seem to find the correct solution. I have tried adding the calculation to several parts of the query, without success. I am sure I am missing something simple.

I work at a mine and I was asked to accomplish the following:

They want to know which trucks was more than 5 % below the average payload of all the other trucks average payload over the past 3 days. It also needs to exclude any trucks that had less than 10 loads

There are 3 tables:

hist_loads (Gives payload and a lot of other information)

hist_exproot (Gives information related to dates, need this to give
a readable date)

hist_eqmtlist (Need this to determine the specific truck models, as
not all truck models must be included)

All of the above tables are joined together by a column called "shiftindex")

Below is my Query:

```<code>    IF OBJECT_ID ('tempdb.dbo.#pave') IS NOT NULL DROP TABLE dbo.#pave;
IF OBJECT_ID ('tempdb.dbo.#pfinal') IS NOT NULL DROP TABLE dbo.#pfinal;

select
    shiftdate
    ,truck
    ,AVG(measureton) as measureton
    ,COUNT(excav) as loads
into #pfinal
from hist_loads as hl
inner join hist_exproot as he on
he.shiftindex = hl.shiftindex
inner join hist_eqmtlist as heq on
heq.shiftindex = hl.shiftindex and
hl.truck = heq.eqmtid
where hl.shiftindex between
                            (select min(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-3)
                            and datepart(month,shiftdate) = datepart(month, getdate()-3)
                            and datepart(day,shiftdate) = datepart(day, getdate()-3))
        and
                            (select max(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-1)
                            and datepart(month,shiftdate) = datepart(month, getdate()-1)
                            and datepart(day,shiftdate) = datepart(day, getdate()-1))

and eqmttype in ('Euclid EH4500','Euclid EH4500-W','Euclid EH4500-HW')
and expit like 1
and measureton not like 0

group by eqmttype, truck, shiftdate
having COUNT(excav) > 10

select
    shiftdate
    ,AVG(measureton) as measureton
    ,COUNT(excav) as loads
into #pave
from hist_loads as hl
inner join hist_exproot as he on
he.shiftindex = hl.shiftindex
inner join hist_eqmtlist as heq on
heq.shiftindex = hl.shiftindex and
hl.truck = heq.eqmtid
where hl.shiftindex between
                            (select min(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-3)
                            and datepart(month,shiftdate) = datepart(month, getdate()-3)
                            and datepart(day,shiftdate) = datepart(day, getdate()-3))
        and
                            (select max(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-1)
                            and datepart(month,shiftdate) = datepart(month, getdate()-1)
                            and datepart(day,shiftdate) = datepart(day, getdate()-1))

and eqmttype in ('Euclid EH4500','Euclid EH4500-W','Euclid EH4500-HW')
and measureton not like 0

group by eqmttype, shiftdate
having COUNT(excav) > 10

select ave.shiftdate, ave.measureton, final.truck
from #pave as ave
left join #pfinal as final on
ave.shiftdate = final.shiftdate
where final.measureton < ave.measureton
order by truck
</code>```

My Result:

```<code>shiftdate           measureton         truck
2017-12-03 00:00:00 230.444365964912    DT01
2017-12-02 00:00:00 231.123014419048    DT04
2017-12-02 00:00:00 231.123014419048    DT07
2017-12-03 00:00:00 230.444365964912    DT07
2017-12-04 00:00:00 226.141955641026    DT07
2017-12-04 00:00:00 226.141955641026    DT10
2017-12-02 00:00:00 231.123014419048    DT13
2017-12-03 00:00:00 230.444365964912    DT14
2017-12-02 00:00:00 231.123014419048    DT15
2017-12-03 00:00:00 230.444365964912    DT17
2017-12-04 00:00:00 226.141955641026    DT17
2017-12-03 00:00:00 230.444365964912    DT20
2017-12-04 00:00:00 226.141955641026    DT20
2017-12-02 00:00:00 231.123014419048    DT22
2017-12-04 00:00:00 226.141955641026    DT24
2017-12-02 00:00:00 231.123014419048    DT25
2017-12-02 00:00:00 231.123014419048    DT27
2017-12-03 00:00:00 230.444365964912    DT27
2017-12-04 00:00:00 226.141955641026    DT28
2017-12-02 00:00:00 231.123014419048    DT30
2017-12-02 00:00:00 231.123014419048    DT31
2017-12-03 00:00:00 230.444365964912    DT31
2017-12-04 00:00:00 226.141955641026    DT32
</code>```

But I only need the trucks that were more than 5% under the average payload. The above result seems to be all of the trucks average payload over the past 3 days. And there also seem to be some repetition between 3 numbers.

Any help would be appreciated.

Body:
I read through several posts on similar issues to this, and cannot seem to find the correct solution. I have tried adding the calculation to several parts of the query, without success. I am sure I am missing something simple.

I work at a mine and I was asked to accomplish the following:

They want to know which trucks was more than 5 % below the average payload of all the other trucks average payload over the past 3 days. It also needs to exclude any trucks that had less than 10 loads

There are 3 tables:

hist_loads (Gives payload and a lot of other information)

hist_exproot (Gives information related to dates, need this to give
a readable date)

hist_eqmtlist (Need this to determine the specific truck models, as
not all truck models must be included)

All of the above tables are joined together by a column called "shiftindex")

Below is my Query:

    IF OBJECT_ID ('tempdb.dbo.#pave') IS NOT NULL DROP TABLE dbo.#pave;
IF OBJECT_ID ('tempdb.dbo.#pfinal') IS NOT NULL DROP TABLE dbo.#pfinal;

select
    shiftdate
    ,truck
    ,AVG(measureton) as measureton
    ,COUNT(excav) as loads
into #pfinal
from hist_loads as hl
inner join hist_exproot as he on
he.shiftindex = hl.shiftindex
inner join hist_eqmtlist as heq on
heq.shiftindex = hl.shiftindex and
hl.truck = heq.eqmtid
where hl.shiftindex between
                            (select min(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-3)
                            and datepart(month,shiftdate) = datepart(month, getdate()-3)
                            and datepart(day,shiftdate) = datepart(day, getdate()-3))
        and
                            (select max(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-1)
                            and datepart(month,shiftdate) = datepart(month, getdate()-1)
                            and datepart(day,shiftdate) = datepart(day, getdate()-1))

and eqmttype in ('Euclid EH4500','Euclid EH4500-W','Euclid EH4500-HW')
and expit like 1
and measureton not like 0

group by eqmttype, truck, shiftdate
having COUNT(excav) > 10

select
    shiftdate
    ,AVG(measureton) as measureton
    ,COUNT(excav) as loads
into #pave
from hist_loads as hl
inner join hist_exproot as he on
he.shiftindex = hl.shiftindex
inner join hist_eqmtlist as heq on
heq.shiftindex = hl.shiftindex and
hl.truck = heq.eqmtid
where hl.shiftindex between
                            (select min(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-3)
                            and datepart(month,shiftdate) = datepart(month, getdate()-3)
                            and datepart(day,shiftdate) = datepart(day, getdate()-3))
        and
                            (select max(shiftindex)
                            from hist_exproot
                            where datepart(year,shiftdate) = datepart(year, getdate()-1)
                            and datepart(month,shiftdate) = datepart(month, getdate()-1)
                            and datepart(day,shiftdate) = datepart(day, getdate()-1))

and eqmttype in ('Euclid EH4500','Euclid EH4500-W','Euclid EH4500-HW')
and measureton not like 0

group by eqmttype, shiftdate
having COUNT(excav) > 10

select ave.shiftdate, ave.measureton, final.truck
from #pave as ave
left join #pfinal as final on
ave.shiftdate = final.shiftdate
where final.measureton < ave.measureton
order by truck

My Result:

shiftdate           measureton         truck
2017-12-03 00:00:00 230.444365964912    DT01
2017-12-02 00:00:00 231.123014419048    DT04
2017-12-02 00:00:00 231.123014419048    DT07
2017-12-03 00:00:00 230.444365964912    DT07
2017-12-04 00:00:00 226.141955641026    DT07
2017-12-04 00:00:00 226.141955641026    DT10
2017-12-02 00:00:00 231.123014419048    DT13
2017-12-03 00:00:00 230.444365964912    DT14
2017-12-02 00:00:00 231.123014419048    DT15
2017-12-03 00:00:00 230.444365964912    DT17
2017-12-04 00:00:00 226.141955641026    DT17
2017-12-03 00:00:00 230.444365964912    DT20
2017-12-04 00:00:00 226.141955641026    DT20
2017-12-02 00:00:00 231.123014419048    DT22
2017-12-04 00:00:00 226.141955641026    DT24
2017-12-02 00:00:00 231.123014419048    DT25
2017-12-02 00:00:00 231.123014419048    DT27
2017-12-03 00:00:00 230.444365964912    DT27
2017-12-04 00:00:00 226.141955641026    DT28
2017-12-02 00:00:00 231.123014419048    DT30
2017-12-02 00:00:00 231.123014419048    DT31
2017-12-03 00:00:00 230.444365964912    DT31
2017-12-04 00:00:00 226.141955641026    DT32

But I only need the trucks that were more than 5% under the average payload. The above result seems to be all of the trucks average payload over the past 3 days. And there also seem to be some repetition between 3 numbers.

Any help would be appreciated.

Body:
Hard to answer without an testable and verifiable example but I managed to do it:

drop table hist_loads
drop table hist_exproot
drop table hist_eqmtlist

GO
create table hist_loads
(
  shiftindex int,
  truck int,
  measureton decimal(18,2),
    --,AVG(measureton) as measureton
    --,COUNT(excav) as loads
   excav int
)

create table hist_exproot
(
  shiftindex int,
  shiftdate date,
)

create table hist_eqmtlist
(
   shiftindex int,
   eqmtid int, -- hl.truck = heq.eqmtid
   eqmttype varchar(100) --in ('Euclid EH4500','Euclid EH4500-W','Euclid EH4500-HW')
)
GO

insert into hist_loads values
 (1,1,100,1)
,(2,1,200,1)
,(3,1,300,1)
,(4,1,100,1)
,(5,1,200,1)
,(6,1,300,1)
,(7,1,100,1)
,(8,1,200,1)
,(9,1,300,1)
,(10,1,100,1)
,(11,1,200,1)
,(12,1,300,1)

,(13,2,300,1)
,(14,2,295,1)
,(15,2,295,1)
,(16,2,300,1)
,(17,2,295,1)
,(18,2,295,1)
,(19,2,300,1)
,(20,2,295,1)
,(21,2,295,1)
,(22,2,300,1)
,(23,2,295,1)
,(24,2,295,1)
,(25,2,300,1)
,(26,2,295,1)
,(27,2,295,1)

,(28,3,300,1)
,(29,3,300,1)
,(30,3,300,1)
,(31,3,300,1)
,(32,3,300,1)
,(33,3,300,1)
,(34,3,300,1)
,(35,3,300,1)
,(36,3,300,1)
,(37,3,300,1)
,(38,3,300,1)
,(39,3,300,1)
,(40,3,300,1)
,(41,3,300,1)
,(42,3,300,1)

,(43,4,999,1)

insert into hist_exproot values
 (1,'2017-12-05')
,(2,'2017-12-05')
,(3,'2017-12-05')
,(4,'2017-12-05')
,(5,'2017-12-05')
,(6,'2017-12-05')
,(7,'2017-12-05')
,(8,'2017-12-05')
,(9,'2017-12-05')
,(10,'2017-12-05')
,(11,'2017-12-05')
,(12,'2017-12-05')
,(13,'2017-12-05')
,(14,'2017-12-05')
,(15,'2017-12-05')
,(16,'2017-12-05')
,(17,'2017-12-05')
,(18,'2017-12-05')
,(19,'2017-12-05')
,(20,'2017-12-05')
,(21,'2017-12-05')
,(22,'2017-12-05')
,(23,'2017-12-05')
,(24,'2017-12-05')
,(25,'2017-12-05')
,(26,'2017-12-05')
,(27,'2017-12-05')
,(28,'2017-12-05')
,(29,'2017-12-05')
,(30,'2017-12-05')
,(31,'2017-12-05')
,(32,'2017-12-05')
,(33,'2017-12-05')
,(34,'2017-12-05')
,(35,'2017-12-05')
,(36,'2017-12-05')
,(37,'2017-12-05')
,(38,'2017-12-05')
,(39,'2017-12-05')
,(40,'2017-12-05')
,(41,'2017-12-05')
,(42,'2017-12-05')
,(43,'2017-12-05')

insert into hist_eqmtlist values
 (1,1,'Euclid EH4500')
,(2,1,'Euclid EH4500')
,(3,1,'Euclid EH4500')
,(4,1,'Euclid EH4500')
,(5,1,'Euclid EH4500')
,(6,1,'Euclid EH4500')
,(7,1,'Euclid EH4500')
,(8,1,'Euclid EH4500')
,(9,1,'Euclid EH4500')
,(10,1,'Euclid EH4500')
,(11,1,'Euclid EH4500')
,(12,1,'Euclid EH4500')

,(13,2,'Euclid EH4500-W')
,(14,2,'Euclid EH4500-W')
,(15,2,'Euclid EH4500-W')
,(16,2,'Euclid EH4500-W')
,(17,2,'Euclid EH4500-W')
,(18,2,'Euclid EH4500-W')
,(19,2,'Euclid EH4500-W')
,(20,2,'Euclid EH4500-W')
,(21,2,'Euclid EH4500-W')
,(22,2,'Euclid EH4500-W')
,(23,2,'Euclid EH4500-W')
,(24,2,'Euclid EH4500-W')
,(25,2,'Euclid EH4500-W')
,(26,2,'Euclid EH4500-W')
,(27,2,'Euclid EH4500-W')

,(28,3,'Euclid EH4500-HW')
,(29,3,'Euclid EH4500-HW')
,(30,3,'Euclid EH4500-HW')
,(31,3,'Euclid EH4500-HW')
,(32,3,'Euclid EH4500-HW')
,(33,3,'Euclid EH4500-HW')
,(34,3,'Euclid EH4500-HW')
,(35,3,'Euclid EH4500-HW')
,(36,3,'Euclid EH4500-HW')
,(37,3,'Euclid EH4500-HW')
,(38,3,'Euclid EH4500-HW')
,(39,3,'Euclid EH4500-HW')
,(40,3,'Euclid EH4500-HW')
,(41,3,'Euclid EH4500-HW')
,(42,3,'Euclid EH4500-HW')

,(43,4,'Euclid EH4500-HW')

GO

declare @dateIni date, @dateEnd date = getdate()
set @dateIni =  dateadd(day,-3,@dateEnd)

select *
into #temp_loads
from
(
    select
     hl.truck
    ,AVG(hl.measureton) as avg_measureton
    ,COUNT(hl.excav) as loads
    from hist_loads hl
    join hist_exproot hex on hex.shiftindex = hl.shiftindex
    where
    hex.shiftdate between @dateIni and @dateEnd
    and exists (select * from hist_eqmtlist heq where heq.eqmtid = hl.truck and heq.eqmttype in ('Euclid EH4500','Euclid EH4500-W','Euclid EH4500-HW')) -- not a join because cannot be sure of the table correlation and data sanity
    group by hl.truck
) as ld
where ld.loads >= 10

declare @average_measureton decimal = (select AVG(avg_measureton) from #temp_loads)
declare @treshould decimal = @average_measureton -(@average_measureton/20.0)

select @average_measureton, @treshould

select tl.truck, tl.avg_measureton, hex.shiftdate
from #temp_loads tl
join hist_eqmtlist heq on heq.eqmtid = tl.truck
join hist_exproot hex on hex.shiftindex = heq.shiftindex
where tl.avg_measureton > @treshould
and hex.shiftdate between @dateIni and @dateEnd
-- you can repeat the truck type test here but it's not necessary, lef tit at the aggregation for performance

drop table #temp_loads

It's a simple case of getting the average and storing it in a variable to be used in the where clause.


问:
What are some good sql databases for home Vista computer?
I have been trying for a long time to get SQL Server Express on my computer to practice my C#/SQL with and I still haven't gotten it to work.

Are there other programs I can use to setup an SQL database to practice with?  If so, which are the best ones for Vista?

EDIT:
To be clear I am not new to SQL programming, I just haven't done any in a while and want to stay fresh.  So I would like something that has most of the features of forms of SQL I would use professionally.

答: For something very simple look at sqlite It supports most SQL syntax and stores it's database in a single file so has very little setup. You'll need an ado.net data provider for it which you can find here Although it isn't a good choice for multi user systems with lots of data it should be fine for an introduction to database programming.</p>

OwnerDisplayName: GordonG

LastEditorDisplayName: GordonG

OwnerDisplayName: Jared


问:
How to fix ssh permission in home dir
I have trouble with my ssh config, I have directory /homa/ivan/.ssh but after my manipulation I have access denied for that derictory. At that moment I have
drwx------    2 root root   4096 Dec  5 14:20 .ssh

after change owner I have

Bad owner or permissions on /home/ivan/.ssh/config

but I vae owner ivan

```<code>drwx------  2 ivan ivan 4096 Дек  5 14:55 .
drwxr-xr-x 32 ivan ivan 4096 Дек  5 14:03 ..
-rwxrwxrwx  1 ivan ivan  106 Ноя 26 22:48 config
-rwxrwxrwx  1 ivan ivan 1675 Дек  5 14:20 id_rsa
-rwxrwxrwx  1 ivan ivan  394 Дек  5 14:20 id_rsa.pub
-rwxrwxrwx  1 ivan ivan 3982 Ноя 28 19:04 known_hosts
</code>```

how to correct tune permission for ssh config and key ?

答: With the chmod u+rwx command. Regards.

Title: How to fix ssh permission in home dir

Body:
I have trouble with my ssh config, I have directory /homa/ivan/.ssh but after my manipulation I have access denied for that derictory. At that moment I have
drwx------    2 root root   4096 Dec  5 14:20 .ssh

after change owner I have

Bad owner or permissions on /home/ivan/.ssh/config

but I vae owner ivan

drwx------  2 ivan ivan 4096 Дек  5 14:55 .
drwxr-xr-x 32 ivan ivan 4096 Дек  5 14:03 ..
-rwxrwxrwx  1 ivan ivan  106 Ноя 26 22:48 config
-rwxrwxrwx  1 ivan ivan 1675 Дек  5 14:20 id_rsa
-rwxrwxrwx  1 ivan ivan  394 Дек  5 14:20 id_rsa.pub
-rwxrwxrwx  1 ivan ivan 3982 Ноя 28 19:04 known_hosts

how to correct tune permission for ssh config and key ?

Body: With the chmod u+rwx command. Regards.


问:
Maven: How to create a correct JDBC driver dependency, if I don't know which database the client will use?
I'm currently learning to use maven, I understood how to create a maven project using dependencies from maven repository - and now I have the following question:

If I have an application which uses a database access, for example via Hibernate, then I need to add a dependency representing the corresponding database driver, for example mysql-connector-java for MySql, ojdbc for Oracle and so on.

But what if I want the program to run on a different machine and I don't know what database engine it uses? What is the common way to solve this? Just import all possible drivers as dependencies? Or is there a more elegant way?

答:
You don't need a dependency at all. What you need is a driver to be available at runtime. It's true that one way to do this is with a dependency, but if you don't know the database you can't really bundle everything in there. You could stick some most common drivers, but then as said there would be licensing issues.

If you're talking about a web application, you could just tell the user to get the appropriate driver and configure a JNDI datasource that the software uses. This is/was a standard from back in the days, but it assumes that the application is a webapp and the end user knows how to configure things (although if he doesn't, he probably shouldn't be setting up the system in the first place).

For a standalone program using a local database, you have the easy choice of using an in memory database like H2 and not allowing any other databases. Naturally this case doesn't work for everything, but I'm including it as an example. In any case it would boil down to the same as with a webapp. Have the end user get the correct driver. If they're running a database server and your app, they should be able to find the right driver too. Then you just need to make sure it's included in the runtime classpath, which might be a bit harder.

The way this is done by SquirrelSQL for example, is by explicitly selecting the drivers as shown in the below picture. This of course again means the user needs to understand what he's doing.


问:
slf4j + log4j2 dond write to file
Good day! I have a project , compiled to a WAR-file and running on wildfly-10.1.0-FINAL. Some time ago I configured logging system and all was fine. 2-3 weeks later, after many commits one of developers notices  that logging goes only to server.log file of wildfly and not to configured log. Configured log in empty. Again - the logging configuration was not changed. What could it be?

pom.xml

```<code><dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>1.7.19</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-slf4j-impl</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-api</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-core</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-jcl</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>
</code>```

jboss-deployment-structure.xml

```<code><deployment>
    <dependencies>
        <module name="org.jboss.ironjacamar.jdbcadapters" />
        <module name="org.postgres" />
    </dependencies>
    <exclusions>
        <module name="org.apache.log4j" />
    </exclusions>
    <exclude-subsystems>
        <subsystem name="logging"/>
    </exclude-subsystems>
</deployment>
</code>```

log4j2.xml

```<code><?xml version="1.0" encoding="UTF-8"?>
<Configuration status="trace">
    <Properties>

<Property name="log-path">${env:LOG_HOME:-/opt/wildfly-10.1.0.Final/standalone/log/}/admin/</Property>
</Properties>
<Appenders>
    <Console name="console-log" target="SYSTEM_OUT">
        <PatternLayout pattern="[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %C:%c{1}:%L - %msg%n"/>
    </Console>

    <RollingFile name="ADMIN" fileName="${log-path}/admin.log"
                 filePattern="${log-path}/admin-%d{yyyy-MM-dd}.log.gz">
        <PatternLayout>
            <pattern>[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %C:%c{1}:%L - %msg%n</pattern>
        </PatternLayout>
        <Policies>
            <TimeBasedTriggeringPolicy interval="1" modulate="true"/>
        </Policies>
    </RollingFile>

</Appenders>
<Loggers>

    <Logger name="my.package" level="INFO" additivity="false" includeLocation="true">
        <appender-ref ref="ADMIN" level="INFO"/>
        <appender-ref ref="console-log" level="DEBUG"/>
    </Logger>

</Loggers>
</code>```

PS. In my server.log I can see this -

```<code>15:05:08,007 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Class path contains multiple SLF4J bindings.
15:05:08,007 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Found binding in [vfs:/content/admin-1.0-SNAPSHOT-dev.war/WEB-INF/lib/slf4j-jdk14-1.7.5.jar/org/slf4j/impl/StaticLoggerBinder.class]

15:05:08,008 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Found binding in [vfs:/content/admin-1.0-SNAPSHOT-dev.war/WEB-INF/lib/log4j-slf4j-impl-2.5.jar/org/slf4j/impl/StaticLoggerBinder.class]

15:05:08,008 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: See http://www.slf4j.org/codes.html#multiple_bindings for an explanation.

15:05:08,009 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Actual binding is of type [org.slf4j.impl.JDK14LoggerFactory]
</code>```

The thing is - file is created, but it is empty.
Any ideas?

Thank you.

答:
You have to resolve the conflict between the dependencies. You could use use mvn dependency:tree to identify dependencies then remove or exclude them.

From the server log : StaticLoggerBinder.class loaded from log4j-slf4j and slf4j-jdk14 and it is conflicting. So you could exclude slf4j-jdk14 library and try. Further about multiple binding

```<code><exclusions>
    <exclusion>
        <groupId>org.slf4j</groupId>
       <artifactId>slf4j-jdk14</artifactId>
    </exclusion>
</exclusions>
</code>```

Title: slf4j + log4j2 dond write to file

Body:
Good day! I have a project , compiled to a WAR-file and running on wildfly-10.1.0-FINAL. Some time ago I configured logging system and all was fine. 2-3 weeks later, after many commits one of developers notices  that logging goes only to server.log file of wildfly and not to configured log. Configured log in empty. Again - the logging configuration was not changed. What could it be?

pom.xml

<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>1.7.19</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-slf4j-impl</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-api</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-core</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>
<dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-jcl</artifactId>
    <version>2.5</version>
    <scope>${artefact.scope}</scope>
</dependency>

jboss-deployment-structure.xml

<deployment>
    <dependencies>
        <module name="org.jboss.ironjacamar.jdbcadapters" />
        <module name="org.postgres" />
    </dependencies>
    <exclusions>
        <module name="org.apache.log4j" />
    </exclusions>
    <exclude-subsystems>
        <subsystem name="logging"/>
    </exclude-subsystems>
</deployment>

log4j2.xml

<?xml version="1.0" encoding="UTF-8"?>
<Configuration status="trace">
    <Properties>

<Property name="log-path">${env:LOG_HOME:-/opt/wildfly-10.1.0.Final/standalone/log/}/admin/</Property>
</Properties>
<Appenders>
    <Console name="console-log" target="SYSTEM_OUT">
        <PatternLayout pattern="[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %C:%c{1}:%L - %msg%n"/>
    </Console>

    <RollingFile name="ADMIN" fileName="${log-path}/admin.log"
                 filePattern="${log-path}/admin-%d{yyyy-MM-dd}.log.gz">
        <PatternLayout>
            <pattern>[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} [%t] %C:%c{1}:%L - %msg%n</pattern>
        </PatternLayout>
        <Policies>
            <TimeBasedTriggeringPolicy interval="1" modulate="true"/>
        </Policies>
    </RollingFile>

</Appenders>
<Loggers>

    <Logger name="my.package" level="INFO" additivity="false" includeLocation="true">
        <appender-ref ref="ADMIN" level="INFO"/>
        <appender-ref ref="console-log" level="DEBUG"/>
    </Logger>

</Loggers>

PS. In my server.log I can see this -

15:05:08,007 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Class path contains multiple SLF4J bindings.
15:05:08,007 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Found binding in [vfs:/content/admin-1.0-SNAPSHOT-dev.war/WEB-INF/lib/slf4j-jdk14-1.7.5.jar/org/slf4j/impl/StaticLoggerBinder.class]

15:05:08,008 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Found binding in [vfs:/content/admin-1.0-SNAPSHOT-dev.war/WEB-INF/lib/log4j-slf4j-impl-2.5.jar/org/slf4j/impl/StaticLoggerBinder.class]

15:05:08,008 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: See http://www.slf4j.org/codes.html#multiple_bindings for an explanation.

15:05:08,009 ERROR [stderr] (ServerService Thread Pool -- 111) SLF4J: Actual binding is of type [org.slf4j.impl.JDK14LoggerFactory]

The thing is - file is created, but it is empty.
Any ideas?

Thank you.

Body:
You have to resolve the conflict between the dependencies. You could use use mvn dependency:tree to identify dependencies then remove or exclude them.

From the server log : StaticLoggerBinder.class loaded from log4j-slf4j and slf4j-jdk14 and it is conflicting. So you could exclude slf4j-jdk14 library and try. Further about multiple binding

<exclusions>
    <exclusion>
        <groupId>org.slf4j</groupId>
       <artifactId>slf4j-jdk14</artifactId>
    </exclusion>
</exclusions>


问:
How to animate background-color center to right and left like google form?
i really lack of css animation. i try to create animation effect on div like google form.

if above link not work (like in my pc now), you can see it here https://ibb.co/cYsYKb

i try transition: all 1s ease; background: linear-gradient(to right, #673ab7);  but not work.

this is my fiddle: https://jsfiddle.net/hL8mncqa/

i try to find it in google, but still cant solve my problem, since i dont know what keyword to find it.

How to do this? any advice are welcome.

答:
Here is a quick solution made with CSS3 animations and with pseudolements of a container: https://jsfiddle.net/nv92uoo4/

$(document).ready(function() {
  $("div").on("click", function() {
   $(this).addClass("hover")
  });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>input {
  position: relative;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid #a0a0a0;
  padding-bottom: 2px;
  outline: 0;
}
div {
  position: relative;
  display: inline-block;
}
div.hover:after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background-color: purple;
  animation-duration: 1s;
  animation-name: hover;
  animation-fill-mode: forwards;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translate(-50%, 0);
}
@keyframes hover {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}</code>```

  <input type="text" value="My value">

```

ContentLicense: CC BY-SA 4.0

Body:
Here is a quick solution made with CSS3 animations and with pseudolements of a container: https://jsfiddle.net/nv92uoo4/

$(document).ready(function() {
  $("div").on("click", function() {
   $(this).addClass("hover")
  });
});

input {
  position: relative;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid #a0a0a0;
  padding-bottom: 2px;
  outline: 0;
}
div {
  position: relative;
  display: inline-block;
}
div.hover:after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background-color: purple;
  animation-duration: 1s;
  animation-name: hover;
  animation-fill-mode: forwards;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translate(-50%, 0);
}
@keyframes hover {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" value="My value">
</div>


问:
Inject into child class, from parent that has constructor parameters. (Aurelia)
I am working with Aurelia and trying to achieve injection in the following way.

I have a parent class that requires a setting object on construction.
I derive from that class with a child and want to inject a service into that class:

```<code>export class parent
{
  constructor(aParam)
  {
    this.Something = aParam;
  }
}

@inject(service)
export class child extends parent
{
  constructor(aParam, aService)
  {
    super(aParam);
    this.Service = aService;
  }
}
</code>```

Now I want to be able to construct the child class the same as the parent class e.g.:

```<code>const Parent = new parent(10);
const Child = new child(10);
</code>```

My question is, how can I achieve this?

I use Aurelia framework, with webpack to generate my javascript.
Any help would be appreciated, the only things I found so far are:
https://ilikekillnerds.com/2016/11/injection-inheritance-aurelia/
But this only solves the case if the parent also injects something.

Regards,
Jan Jaap

答:
Get the instance of service directly from Aurelia's dependency injection container. This is the same as the "normal" injection code (@inject(service)...):

```<code>import {Container} from 'aurelia-dependency-injection’;

export class child extends parent
{
  constructor(aParam)
  {
    super(aParam);
    this.Service = Container.instance.get(service);;
  }
}
</code>```

Body:
I am working with Aurelia and trying to achieve injection in the following way.

I have a parent class that requires a setting object on construction.
I derive from that class with a child and want to inject a service into that class:

export class parent
{
  constructor(aParam)
  {
    this.Something = aParam;
  }
}

@inject(service)
export class child extends parent
{
  constructor(aParam, aService)
  {
    super(aParam);
    this.Service = aService;
  }
}

Now I want to be able to construct the child class the same as the parent class e.g.:

const Parent = new parent(10);
const Child = new child(10);

My question is, how can I achieve this?

I use Aurelia framework, with webpack to generate my javascript.
Any help would be appreciated, the only things I found so far are:
https://ilikekillnerds.com/2016/11/injection-inheritance-aurelia/
But this only solves the case if the parent also injects something.

Regards,
Jan Jaap

Body:
Get the instance of service directly from Aurelia's dependency injection container. This is the same as the "normal" injection code (@inject(service)...):

import {Container} from 'aurelia-dependency-injection’;

export class child extends parent
{
  constructor(aParam)
  {
    super(aParam);
    this.Service = Container.instance.get(service);;
  }
}


问:
find the min and max values of nested list by index of element in nested list
I have a nested list like the following:

```<code>x = [[1,  5, 3,  4],
     [5, 10, 7,  8],
     [9,  9, 2, 12]]
</code>```

I need to find to find the min and max values of the nested list transposed such that the result for min is:

```<code>1, 5, 2, 4  # 1 is the min of first column (1, 5, 9) a.s.o
</code>```

and the max should be:

```<code>9, 10, 7, 12
</code>```

I tried to convert it into a dataframe first and then doing max and min on the different axis but all doesn't come up as the result I want.

答:
You can do the following using the built-in map, min, max functions and the zip(*...) transpositioning pattern:

```<code>min_x = list(map(min, zip(*x)))
max_x = list(map(max, zip(*x)))
</code>```

Or as pointed out by Chris_Rands, this shortened form will also work:

```<code>min_x = list(map(min, *x))
max_x = list(map(max, *x))
</code>```

Or use comprehensions:

```<code>min_x = [min(col) for col in zip(*x)]
max_x = [max(col) for col in zip(*x)]
</code>```

If you desperately want to do it one line:

```<code>min_x, max_x = zip(*[(min(col), max(col)) for col in zip(*x)])
</code>```

Body:
I have a nested list like the following:

x = [[1,  5, 3,  4],
     [5, 10, 7,  8],
     [9,  9, 2, 12]]

I need to find to find the min and max values of the nested list transposed such that the result for min is:

1, 5, 2, 4  # 1 is the min of first column (1, 5, 9) a.s.o

and the max should be:

9, 10, 7, 12

I tried to convert it into a dataframe first and then doing max and min on the different axis but all doesn't come up as the result I want.

Body:
You can do the following using the built-in map, min, max functions and the zip(*...) transpositioning pattern:

min_x = list(map(min, zip(*x)))
max_x = list(map(max, zip(*x)))

Or as pointed out by Chris_Rands, this shortened form will also work:

min_x = list(map(min, *x))
max_x = list(map(max, *x))

Or use comprehensions:

min_x = [min(col) for col in zip(*x)]
max_x = [max(col) for col in zip(*x)]

If you desperately want to do it one line:

min_x, max_x = zip(*[(min(col), max(col)) for col in zip(*x)])


问:
Jquery dialog() Should i load dialog content using ajax
I have a page with several jquery Ui buttons that calls dialog() to open specific forms. I currently have all the forms on the same page marked as hidden. So when a specific button is clicked, the dialog will open showing the specific form. My questions is, is it better to have all the formss on the same page marked as hidden, or is it better to have all the forms in a separate file and then use .ajax to call a specific forms from the file using it's ID. Any other thoughts are welcome.  </p>

答: It depends on the complexity of the page and the forms. If your page loads quickly having the forms already loaded will insure that they "pop" very quickly for the user. However if the extra code in the forms is causing your page load times to degrade it might be better to load them using AJAX. There isn't a real right or wrong global answer. However if you don't have AJAX on your resume yet. . . there is an advantage to using the latter.</p>


问:
why the height of the out div is affected by vertical-align

in chrome, I thought the height of .wrap should be 24px.

it is 25px when the vertial-align is set to middle. can someone explain why?

answer in this article

body {
  line-height: 1.5;
}

.wrap {
  font-size:16px;  /* 16*1.5= 24 */
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrap">
  <button class="btn">
    OK
  </button>
</div></code>```

答:
As It is explained Here

Aligns the middle of the element with the baseline plus half the
  x-height of the parent.

The line-height of your .wrap element is by default 1.5 that inherits from the body, the vertical align property will render depending on your line-height, so if the line height is bigger than your wrapper element, you will see the effect. to fix it just put line-height in your .wrap class, you can play with it to see how the line-height affects the vertical alignment.

body {
  line-height: 1.5;
}

.wrap {
  line-height:1;
  background:red;
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrap">
  <button class="btn">
    OK
  </button>
</div></code>```

Body:
in chrome, I thought the height of .wrap should be 24px.

it is 25px when the vertial-align is set to middle. can someone explain why?

answer in this article

body {
  line-height: 1.5;
}

.wrap {
  font-size:16px;  /* 16*1.5= 24 */
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

  <button class="btn">
    OK
  </button>

Body:
As It is explained Here

Aligns the middle of the element with the baseline plus half the
  x-height of the parent.

The line-height of your .wrap element is by default 1.5 that inherits from the body, the vertical align property will render depending on your line-height, so if the line height is bigger than your wrapper element, you will see the effect. to fix it just put line-height in your .wrap class, you can play with it to see how the line-height affects the vertical alignment.

body {
  line-height: 1.5;
}

.wrap {
  line-height:1;
  background:red;
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="wrap">
  <button class="btn">
    OK
  </button>
</div>


问:
Why could u-net mask image with smaller mask?
The input image size of u-net is 572*572, but the output mask size is 388*388. How could the image get masked with a smaller mask?</p>

答:
Probably you are referring to the scientific paper by Ronneberger et al in which the U-Net architecture was published. There the graph shows these numbers.

The explanation is a bit hidden in section "3. Training" of the paper:

Due to the unpadded convolutions, the output image is smaller than the input by a constant border width.

This means that during each convolution, part of the image is "cropped" since the convolution will start in a coordinate so that it fully overlaps with the input-image / input-blob of the layer. In case of 3x3 convolutions, this is always one pixel at each side. For more a visual explanation of kernels/convolutions see e.g. here.
The output is smaller because due to the cropping occuring during unpadded convolutions only (the inner) part of the image gets a result.

It is not a general characteristic of the architecture, but something inherent to (unpadded) convolutions and can be avoided with padding. Probably the most common strategy is mirroring at the image borders, so that each convolution can start at the very edge of an image (and sees mirrored pixels in places where it's kernel overlaps). Then the input size can be preserved and the full image will be segmented.